بدر عبدالعزيز اإلب ارىي

Transcript

1

2 تصمي الغالؼ لممصم المبدع : بدر عبدالعزيز اإلب ارىي

3 تعم م HTML5 & CSS3 )الخطوة األولى نحو لمويب( البرمجة الميندس مختار سي د صالح

4

5 جميع الحقوؽ محفوظة لممؤل ؼ

6

7 اإلهداء إلى أعمى نخمتيف... عمى ضفاؼ القم ب والدي حفظيما اهلل.

8

9 تنويه فرغت مف تأليؼ ىذا الكتاب في األشير األولى مف عا, و كنت قد عقدت العز عمى إصداره مطبوعا كأ وؿ كتاب عربي في موضوعو, حاذيا بذلؾ حذو أخيو و سابقو )تعم jquery في دقيقة(, لكف مشيئة اهلل قضت أ ل تتيي أ الظروؼ المالئمة لذلؾ حت ى ىذه المحظة بعد انقضاء خمسة و عشريف شي ار عمى إتمامو, و ألن ني أؤمف أف قيمة عمؿ كيذا تتضاءؿ مع مرور الوقت فقد أريت -بعد تفكير- أف أنشره مخمصا بشكؿ مج اني بصيغة الكتاب اإللكتروني )PDF( لعؿ أحد الد ارسيف ينتفع بو لم ا كاف نشره بيذه الص يغة ل يتطم ب من ي أكثر مف كتابة ىذه األسطر. مختار البوكماؿ / /

10

11 بين يدي الكتاب بس اهلل الر حمف الر حي, و الص الة و ال سال عمى نبي نا محم د و عمى آلو و أصحابو أجمعيف, و بعد: ل ي ع د الػ Web اليو مقتص ار عمى تقدي المعمومة بشكؿ نص ي بسيط, حيث أصبح مف المي تقدي المحتوى بشكؿ و أسموب أقرب ما يكوف إلى اإلعالمي, بؿ رب ما ىو كذلؾ فعال, فقد أصبح مف Web -ب أريي- النادر أف تجد في مواقع الػ اليو -و أعني المواقع الجيدة منيا- ما ل يقد المعمومات بشكؿ مسموع و مرئي إضافة إلى الشكؿ و المقروء التقميدي ىذا مف ناحية, أما مف Web 2.0 Web الناحية األخرى فقد تطو ر الػ ذاتو كفيو مع بدء التنظير لما يعرؼ بػالػ عا, و ىذا ما أد ى بالنتيجة إلى ظيور الحاجة لتطوير األدوات و المغات البرمجية التي كانت بيف يدي مطوري و مصممي مواقع الػ Web و التي أصبحت قاصرة عف تحقيؽ متطمبات العمالء الطموحيف بامتالؾ مواقع ويب عصرية و التي سرعاف ما قا مف ييمو أمر التقنية بتطويرىا و تقدي إصدا ارت جديدة منيا أقوى و أكثر تأقمما مع Web اليو, ذلؾ أل ف " التأقم يعتبر أساس النجاح في عال."Web الػ يناقش ىذا الكتاب أحدث إصدار لكؿ مف لغتي و CSS المتاف تعتب ارف الخطوة األولى HTML مط و ر ألي مف الصفر Web و يقو بشرح إذ مف ث معايير HTML5 لغة بعد التمييد لذلؾ مف خالؿ شرح HTML XHTML مف الصفر أيضا, كما التقميدية يقد ىذا الكتاب شرحا مفص ال لػ بعد التمييد لذلؾ مف خالؿ شرح التقميدية CSS مف الصفر أيضا, و بيذا فإف ىذا الكتاب CSS3 فصميف: مف يتألؼ - :HTML5 يناقش ىذا الفصؿ اإلصدار الخامس )و األحدث( مف لغة البرمجة النصي ة التشعبي ة HTML بشكؿ مفص ؿ و متدر ج و يضمف لقارئو أف يكوف قاد ار عمى كتابة صفحات ويب بالمحتوى الذي يرغبو و بالشكؿ الذي يريده بإذف اهلل.

12 - :CSS3 يناقش ىذا الفصؿ كامؿ الم ازيا التي يقدميا اإلصدار الثالث )و األحدث( مف أو ارؽ األنماط ا لنسيابي ة CSS بشكؿ بسيط و مفيو, و يعد قارئو أف يكوف قاد ار عمى تجميؿ المحتوى الذي قد مو في صفحات الويب التي تعم كتابتيا في الفصؿ األو ؿ. البرمجة لمويب Client Side مف طرؼ العميؿ كاف يجب أف - كي يكتمؿ الحديث عف Java Script يكوف ىناؾ فصؿ ثالث يتحدث عف لغة و لكف و ألنني مف أنصار الحداثة )و السيولة( فيما يتعمؽ بالتقنيات البرمجية فأنصح القارئ العزيز بق ارءة كتابي "تعم jquery دقيقة" في أو أي مرجع يتحدث عف لغة بشكؿ واضح و مبس ط jquery Java Script بعد ق ارءة ىذا الكتاب أو ل, ألف jquery ىي البديؿ العصري لمغة ب أريي. أم ا عف طريقة عرض األفكار في ىذا الكتاب فقد حاولت و اجتيدت كي أجعميا ممم ة و ل غير معق دة و ل شبيية بالمحتوى المتعب الذي كثي ار ما عانيت منو في الكتب التي تناقش لغات البرمجة لألسؼ و يمكنني أف أقوؿ أف ىذا الكتاب ل يفج ر عش ارت األسطر البرمج ية غير المفيومة دفعة واحدة في وجو قارئو دوف توضيح ليا, كما أن و ل يطيؿ أكثر مف المطموب في عرض الفكرة, لكنو باختصار يقوؿ ما يجب قولو فقط دوف أف يغفؿ أي جانب مف الجوانب التي تتوجب معرفتيا. ختاما أسأؿ اهلل أف يتقب ؿ ىذا العمؿ و أف يبارؾ فيو و يكتبو صدقة العم الذي ينتفع باب مف جارية بو و أف يمي قارئو الفي و الحفظ و الصبر عمى التعم..مختار سي د صالح البوكماؿ / /

13 الفصؿ األو ؿ HTML 5

14

15 مقدمة يناقش ىذا الفصؿ لغة HTML5 التي تعتبر حجر األساس في إنشاء مواقع الويب, و ألن نا ل XHTML HTML يمكف أف نتحدث عف HTML5 مباشرة فسيناقش ىذا الفصؿ لغتي و و أو ل, لغة البداية مع.HTML ما هي HTML Hyper Text Markup abbreviation إف HTML ىي اختصار الحروؼ األولى مف الجممة و التي تعني بترجمة غير حرفية )لغة وصؼ صفحات الويب(, و ىي ليست لغة Language HTML برمجي ة, ل, بؿ ىي لغة وصفي ة,Markup Language ألف مجموعة مف تستخد الوسو Tags لوصؼ صفحة الويب. أم ا الوسو Tags فيي كممات أو أحرؼ محددة مسبقا Keywords تحمؿ معاني خاص ة, و تكوف محصورة بيف قوسيف مف الشكؿ > < مثؿ <b> و,<html> تأتي الوسو في الغالب عمى شكؿ Begin Tag <b> أزواج مثؿ <b> و <b/>, يدعى الوس األو ؿ بوس البداية أو وس الفتح End Tag <b/> و يدعى الوس الثاني,Opening Tag بوس النياية أو وس اإلغالؽ.Closing Tag يت كتابة مستندات HTML باستخدا أي محرر نصي بسيط )مثؿ )notepad أو متقد )مثؿ DreamWaver أو,)Visual Studio و يت تخزينيا في ممفات تحمؿ امتدادا extension مف ا لمتداديف التالييف :.html أو,.htm و بالطبع ل يوجد أي فرؽ بينيما. ل أعرؼ إف قا أحد قبمي بترجمتيا بيذه الطريقة لكن ني أشعر أنيا الترجمة األنسب.

16 مستندات تتكوف HTML بشكؿ أساسي مف محتوى نصي عادي باإلضافة إلى مجموعة مف وسو,Web Pages و في الحقيقة فإف مستندات HTML تدعى بػ)صفحات الويب( يت و,HTML Web استخدا برنامج خاص لق ارءة ىذه المستندات يعرؼ ىذا البرنامج باس مستعرض الويب.. Google chrome Firefox و مف أمثمتو Internet Explorer و و إلخ. Browser اليدؼ مف مستعرض الويب ىو ق ارءة مستندات HTML و عرضيا بشكؿ صفحات ويب, بمعنى أف مستعرض الويب ل يعرض وسو HTML كنصوص بشكؿ مباشر و لكن و يستخدميا إلنتاج صفحة ويب بالشكؿ و المحتوى الموصوفيف في مستند.HTML HTML كيف أبدأ في كتابة مستندات تعمم )Notepad و HTML كؿ ما تحتاجو لكي تبدأ في كتابة مستندات تعم ىو محرر نصوص )مثؿ مستعرض ويب )مثؿ,)Internet Explorer بعد ذلؾ يمكنؾ ق ارءة الفق ارت التالية و التعم خطوة بخطوة و أؤكد لؾ أف أفضؿ طريقة لمتعم ب أريي- ىي كتابة األمثمة التي ستصادفؾ مباشر باستخدا محرر النصوص و مف ث اختبارىا باستخدا مستعرض الويب. بشكؿ لحقا المثال األو ل في لغة HTML سنقو اآلف بكتابة أوؿ صفحة HTML معا باتباع الخطوات التالية: نقو أو ل بفتح أحد محر ارت النصوص و ليكف المفكرة Notepad الشيفرة التالية: عمى سبيؿ المثاؿ و نكتب <html> <head> <title> My first HTML page

17 </title> </head> <body> <p> Welcome to my first HTML page! </p> </body> </html> ث نقو بحفظ الممؼ باس firstpage.html الشكل : 1 كتابة أول شيفرة HTML في برنامج المفكرة و حفظ الممف.txt ىناؾ طريقتاف, األولى أف نختار الخيار جميع الممفات الظاىرة في الصورة أسفؿ اس الممؼ ث نكتب اس الممؼ و ممحوظة : لحفظ الممؼ بالحقة مختمفة عف الالحقة *.* مف القائمة المنسدلة حفظ كػ Save as type لحقتو بشكؿ عادي, أم ا الثانية و التي أفض ميا شخصي ا فيي أف نضع اس الممؼ مع لحقتو المطموبة بيف عالمتي اقتباس مزدوجتيف و نختار حفظ كما ىو موض ح في الصورة أعاله.

18 firstpage.html و اآلف بعد أف قمنا بحفظ الممؼ با لس نقو باستع ارضو باستخدا أحد Internet Explorer 8 مستعرضات و ليكف الويب عمى سبيؿ المثاؿ لنشاىد الشكؿ النيائي لمصفحة كمايمي: الشكل : 2 الشكل النهائي في المستعرض ألو ل صفحة مكتوبة باستخدام HTML كما ترى فقد قمنا بكتابة صفحتنا األولى باستخدا لغة HTML و ىذه الصفحة تحتوي عمى نص ترحيب بسيط ىو النص page!,welcome to my first HTML ت توليد ىذا النص باستخدا الوس الخاص p و بتصو ري فإف ىذه الصفحة عمى بساطتيا ستكوف الباب الواسع لمدخوؿ إلى لغة إف HTML ق أرت الفق ارت التالية بقميؿ مف التركيز. عناصر HTML Elements تتكوف كؿ صفحة مف صفحات HTML مف مجموعة مف العناصر يت إنشاؤىا باستخدا الوسو Tags و الوسو كما قمنا سابقا عبارة عف أحرؼ أو كممات تحمؿ معاني خاصة بالنسبة لمستعرض الويب و غالبا ما تكوف أسماء الوسو عبارة عف اختصا ارت لكممات إنجميزي ة Paragraphs فالوس <p> مثال يستخد إلنشاء العنصر المسؤوؿ عف عرض مقاطع النصوص ضمف صفحات HTML مناقشة عممو سيت الذي و عمؿ مع باقي الوسو بشكؿ تفصيمي في الصفحات التالية. <head> <html> تحصر الوسو بيف أقواس مف الشكؿ > < و مف أمثمتيا الوس و الوس و <body> الوس <title> و الوس و الوس <p>.

19 End Tag Begin Tag لكؿ عنصر مف عناصر HTML وس بداية و وس نياية تكوف وسو البداية محصورة بيف القوسيف > < أم ا وسو النياية فتكوف محصورة بيف القوسيف السابقيف مضافا إلييما رمز الخط المائؿ / المعروؼ بػ Slash بالشكؿ > /> و مف أمثمة وسو النياية الوس </p> </body> </title> و الوس </head> و الوس و الوس و الوس و يحوي كؿ </html> p عنصر مف عناصر HTML بيف وسمي بدايتو و نيايتو نص ا عادي ا لعرضو )كما فعؿ العنصر HTML في مثالنا السابؽ( و يمكف أف يحوي أي عدد آخر مف عناصر شرط ا للت از بترتيب متناظر لوسو النياية و البداية, فعند كتابة وسو النياية يجب أف ي ارعى الترتيب فيت كتابة وس النياية الخاص بوس البداية غير المنتيي )الذي ليس لو وس نياية( األقرب فاألقرب, ففي حيف أف الترتيب التالي يعتبر صحيحيا : <html> <body> <p> ض ػبد س ١ ز ػشػ ف ا سزؼشع! </p> </body> </html> ألف وس النياية األو ؿ جاء إلنياء أقرب وس بداية غير منتيي و ىو <p> في مثالنا, ث </p> جاء وس النياية إلنياء أقرب وس بداية غير منتيي و ىو,<body> ث جاء وس </body>.<html> النياية </html> إلنياء أقرب وس بداية غير منتيي و ىو فإف الترتيب التالي يعتبر خاطئا : <html> <body>

20 <p> ض ػبد س ١ ز ػشػ ف ا سزؼشع! </html> </body> </p> <body> ألف وس النياية </body> جاء إلنياء الوس الذي ل يكف الوس األقرب غير المنتيي.</p> لألسؼ و الحالة نفسيا تكررت مع وسمي النياية </html> و الخالصة: ل تن س كتابة وس اإلغالؽ و ارع ترتيب وسو اإلغالؽ. الف ارغات White Spaces في لغة ل يوجد أي قيمة لمحارؼ الف ارغات )مثؿ و.. إلخ( عند استع ارض Tab Space HTML الصفحات باستخدا مستعرض الويب و إن ما تستخد محارؼ الف ارغات لغرض ترتيب الشيفرة و جعميا مقروءة بشكؿ أوضح فقط, فق ارءة شيفرة HTML التالية عمى سبيؿ المثاؿ: <html> <body> <h1> Hi! </html> </body> </h1> أسيؿ بكثير مف ق ارءة شيفرة HTML التالية: <html><body><h1>hi!</h1></body></html>

21 مع أن يما متماثمتاف تماما عند استع ارضيما باستخدا مستعرض الويب. فائدة : مف العادات البرمجي ة الجيدة إ ازحة كؿ المحتوى الموجود بيف وسمي بداية و نياية متماثميف بمقدار ضغطة.)Space و البعض يفض ؿ إ ازحتيا بمقدار ثالث ف ارغات )ثالث ضغطات عمى مفتاح Tab الشكل العام لعناصر HTML :HTML يت وصؼ HTML عناصر باستخدا الوسو, و فيمايمي نعرض الشكؿ العا لعنصر.Begin Tag يبدأ عنصر HTML بوس البداية.End Tag ينتيي عنصر HTML بوس النياية كؿ ما يت كتابتو بيف وسمي البداية و النياية يدعى محتوى عنصر HTML عمما أف ىناؾ بعض العناصر التي ل تحوي أي محتوى و التي تسمى عديمة المحتوى. وسما يندمج البداية و النياية في وس واحد حالة في العناصر عديمة المحتوى. يت تمرير مجموعة مف الخصائص ألغمب عناصر HTML في وس البداية عف طريؽ الواصفات.Attributes ممحوظة: دائما و أبدا, ق بكتابة عناصر HTML باألحرؼ اإلنجميزي ة بحالتيا الصغيرة.Lower Case لنشاىد األمثمة التالية: وسم البداية <p> <a href="index.htm"> <hr /> HTML في الصفحة بشكؿ تخي مي, وسم النهاية </p> </a> يمث ؿ كؿ سطر محتوى العنصر Welcome to my website. Go to index في الجدوؿ السابؽ عنص ار مف عناصر </p> فالعنصر األو ؿ يبدأ بالوس <p> و ينتيي بالوس و يحوي المحتوى النصي Welcome to

22 </a> بينما يبدأ العنصر الثاني بالوس href="index.htm"> a> و ينتيي بالوس my website,href في index.htm Go to index المحتوى النصي يحوي و مع إسناد القيمة إلى واصفتو حيف أف العنصر الثالث عدي المحتوى يتكوف مف اتحاد وسمي البداية و النياية في وس واحد بالشكؿ />.<hr الشكل العام لصفحات HTML تتكوف كؿ صفحة HTML مف ثالث مناطؽ: :Body Section منطقة جسد الصفحة </body> و ىي المنطقة المحصورة بيف وسمي <body> و و ىذه المنطقة ىي التي تنتج الشكؿ النيائي لمصفحة و تض جميع العناصر التي تمث ؿ المحتوى الظاىر لمصفحة و الذي سيظير في مستعرض الويب عند استع ارض ىذه الصفحة و بالطبع فإف الجزء األكبر مف عناصر HTML سيكوف في ىذه المنطقة. :Head Section منطقة أرس الصفحة </head> و ىي المنطقة المحصورة بيف وسمي <head> و و ىذه المنطقة تحوي مجموعة مف عناصر HTML أغمبيا ل يظير في مستعرض الويب عند استع ارض الصفحة و لكف الميمة الرئيسية ليذه المنطقة ىي إعطاء معمومات عف ماىي ة المحتوى الموجود بالصفحة إضافة لبعض المعمومات غير الظاىرة األخرى و التي تستخدميا محركات البحث مف أجؿ األرشفة و البحث في الغالب. المنطقة األ : ل يرد ىذا المصطمح في أي مف الم ارجع التي ق أرتيا و إن ما ىو اجتياد شخصي لتبسيط الفكرة المطروحة )ب أريي(.

23 </html> و ىي المنطقة المحصورة بيف وسمي <html> و و ىذه المنطقة ىي المنطقة التي تحدد بداية و نياية الصفحة و ىي التي تض منطقتي ال أرس و الجسد و بيذا فيي تض كامؿ مستند )صفحة(.HTML و بيذا يكوف الشكؿ العا ألي مستند HTML كمايمي: <html> <head> حز مخ ا شأط غ ١ ش ا ظب ش س ١ ى ب </head> <body> حز ا ظفحخ ا بئ فؼ ١ ب س ١ ى ب </html> </body> ا ظب ش واصفات الوسوم Attributes يتمخ ص كؿ ما قمناه سابقا بأف لغة HTML تتيح لؾ تقدي المحتوى عبر إنشاء مجموعة مف العناصر, ميمة كؿ عنصر مف عناصر HTML عرض شيء محدد جدا في صفحتؾ فيناؾ عناصر لعرض النصوص و ىناؾ عناصر لعرض الصور و ىناؾ عناصر لعرض الروابط التشعبي ة.. إلخ, يت إنشاء كؿ عنصر مف ىذه العناصر بواسطة وس خاص مف وسو Links,HTML و يكوف لكؿ عنصر وس بداية و وس نياية يحص ارف محتوى العنصر الظاىر بينيما. يمكف تزويد بعض وسو البداية بمجموعة مف الخصائص اإلضافي ة و التي تخص ص سموؾ عرض العنصر لمحتواه و يت ىذا عبر ما يعرؼ بالواصفات,Attributes انظر لمشيفرة التالية عمى سبيؿ المثاؿ:

24 <p align="center"> ا حز ا ظ ؼ ظش ػشع ا ظ ص </p> p كما تالحظ فقد قمنا بإضافة شيء جديد في ىذه الشيفرة إلى وس البداية الخاص بالعنصر أ ل و center p ىو الواصفة align التي تحدد محاذاة النص الذي سيعرضو العنصر و أعطيناىا القيمة لعرض النص في منتصؼ الصفحة و عند استع ارضيا سيظير النص كمايمي: الشكل : 3 عنصر عرض النصوص <p> عند إضافة واصفة المحاذاة align Attributes حسنا, يوجد لكؿ وس بداية مف وسو HTML مجموعة معروفة سمفا مف الواصفات و يوجد لكؿ واصفة مجموعة معروفة سمفا مف القي التي يمكف أف يت إسنادىا إلى الواصفة, فالواصفة ىي إحدى الواصفات المعروفة سمفا لوس البداية <p> عمى سبيؿ المثاؿ و القي التي يمكف align center right أف تسند إلييا ىي left لمحاذاة النص إلى اليسار أو لمحاذاة النص إلى اليميف أو لمحاذاة النص إلى الوسط, و سيت بالطبع عرض واصفات كؿ وس بالتفصيؿ عند الحديث عنو و name أظف أنو ل داعي لمقوؿ أف الشكؿ العا لمواصفة ىو "name="value حيث أف ىو اس الواصفة و value ىي القيمة الم سن دة لتمؾ الواصفة و التي يجب أف توضع بيف عالمتي اقتباس. " مزدوجتيف " أو عالمتي اقتباس مفردتيف ممحوظة : يجب أف تت كتابة وسو و واصفات HTML بحروؼ إنجميزي ة صغيرة.Lower Case

25 أظف أن نا نستطيع اآلف أف نبدأ بالحديث عف عناصر HTML كافة و بالتفصيؿ و البداية مع عناصر العناويف,Headings و لكف قبؿ ذلؾ سنعرض جدو ل بمجموعة مف الواصفات المشتركة بيف أغمب وسو HTML ىنا بد ل مف تك اررىا مع كؿ وس مف تمؾ الوسو, و فيمايمي الجدوؿ: اسم الواصفة id dir align class name القيم الممكنة الشرح اي اس فريد)غير مكرر( بالنسبة لممستند ltr rtl left right center justify أي اس فئة CSS صالح أي اس فريد يت استخدا ىذا ا لس لمتعامؿ مع العنصر برمجي ا,jQuery و ليا أو Java Script باستخدا لغة في فقرة أحدىا استخدامات أخرى سيت عرض الروابط الداخمية لحقا لتحديد اتجاه الق ارءة, ltr تعني أف اتجاه الق ارءة مف اليسار إلى اليميف أم ا rtl فتعني أف اتجاه الق ارءة مف اليميف إلى اليسار لتحديد محاذاة النص لمنح كافة خصائص الفئة إلى العنصر و سيت مناقشة ىذا بالتفصيؿ في الفصؿ الخاص بػ CSS3 تستخد لتمييز العنصر برمجي ا الجدول : 1 جدول الواصفات المشتركة بين أغمب عناصر HTML

26 عناصر العناوين Headings توفر لغة ست ة عناصر لعرض العناويف و ىي عمى الترتيب: h4 و و و و h3 h2 h1 HTML و حيث أف العنصر ىو أكبرىا حجما و العنصر h6 ىو األصغر و ما بينيما يتدرج h1 h6 h5 في الحج, و طبعا حرؼ الػ ىنا اختصار لكممة,Heading دعنا نجرب الشيفرة التالية عمى h سبيؿ المثاؿ: <html> <head> <title> طفحخ اخزجبس ؼ بطش ا ؼ ب ٠ </head> </title> <body dir='rtl'> عىىان مه انمضرىي األو ل< h1 > < h1 />عىصر عىىان مه انمضرىي انثاوي< h2 > < h2 />عىصر عىىان مه انمضرىي انثانث< h3 > < h3 />عىصر عىىان مه انمضرىي انراتع< h4 > < h4 />عىصر عىىان مه انمضرىي انخامش< h5 > < h5 />عىصر عىىان مه انمضرىي انضادس< h6 > < h6 />عىصر عند استع ارض الصفحة السابقة في مستعرض الويب سنشاىد النتيجة التالية: </html> </body>

27 الشكل : 4 صفحة اختبار عناصر العناوين h1 إلى h6 dir كما تالحظ فقد قمنا بتزويد الوس <body> بالواصفة و التي تحدد اتجاه ق ارءة جسد المستند و right to left قمنا بإسناد القيمة rtl ذلؾ لنجعؿ ليا و اتجاه الق ارءة مف اليميف إلى اليسار و ىو ما يتناسب مع المغة العربية بالطبع, و في حاؿ أف ىذه الواصفة ل ت ع ط أية قيمة فإف القيمة ا لفت ارضية ليا ىي ltr أي أف اتجاه الق ارءة ا لفت ارضي مف اليسار إلى اليميف. <h6> ممحوظة: استخد <h1> عناصر العناويف إلى مف أجؿ عناويف الفق ارت فقط, و ل تستخدميا لجعؿ النص عريضا أو كبير الحج فيناؾ وسو خاصة ليذيف الغرضيف. عنصر الخط األفقي Horizontal Line تقد لغة الوس الخاص </ <hr إلنشاء الخطوط األفقي ة في الصفحة, انظر لممثاؿ التالي: HTML <html> <head>

28 <title> طفحخ اخزجبس ؼ ظش ا خؾ األفم </title> </head> <body dir='rtl'> ا فمشح األ زجشثخ فمؾ< p > < p /> حز <hr /> ا فمشح ا ثب ١ خ زجشثخ فمؾ< p > < p /> حز <hr /> ا فمشح ا ثب ثخ زجشثخ فمؾ< p > < p /> حز </body> </html> تبدو الشيفرة السابقة في مستعرض الويب كمايمي: الشكل : 5 صفحة تجربة العنصر </ <hr

29 التعميقات Comments اعتاد المبرمجوف في لغات البرمجة التقميدي ة عمى كتابة أسطر توضيحي ة ل ت عال ج إذ أنيا ل تعتبر جزءا مف الشيفرة, و إن ما تستخد فقط لتذكير المبرمج بأج ازء الشيفرة عندما يعود لتعديميا بعد فترة HTML مف الزمف, و ىذه األسطر تعرؼ بالتعميقات,Comments و مع أف لغة وصفية كما قمت سابقا إ ل أنيا توفر آلية لكتابة التعميقات ضمف المستندات, فتقد الصيغة العامة التالية لكتابة التعميؽ:  لنشاىد المثاؿ التالي عمى استخدا التعميقات ضمف مستند :HTML <html> <head> طفحخ اخزجبس ؼ ظش ا خؾ األفم ؼبفب إ ١ ب <title> < title /> ج ػخ ا زؼ ١ مبد ا جش ج ١ خ </head> <body dir='rtl'> <-- انضطريه انرانييه نهفقرج األون --!> ا فمشح األ زجشثخ فمؾ< p > < p /> حز <hr </ <-- انضطريه انرانييه نهفقرج انثاويح --!> ا فمشح ا ثب ١ خ زجشثخ فمؾ< p > < p /> حز <hr </ <-- انضطر انراني نهفقرج انثانثح --!> ا فمشح ا ثب ثخ زجشثخ فمؾ< p > < p /> حز </html> </body>

30 تبدو الشيفرة السابقة كمايمي في مستعرض الويب مما يؤك د أف التعميقات ل تظير في المستند) أثناء :)"View->source" استع ارض الصفحة جر ب اختيار األمر "عرض-> أو المصدر" الشكل : 6 التعميقات تظهر بالمون األخضر في نافذة عرض المصدر و ال تظهر في الصفحة ممحوظة: ل تنس إشارة التعج ب بعد القوس األو ؿ في بداية وس التعميؽ. عناصر النصوص Paragraphs تتكوف صفحة الويب في الواقع مف مجموعة مف الفق ارت النصية في الغالب, يت إنشاء ىذه الفق ارت <br /> باستخدا الوس <p> و الذي مر معنا استخدامو في األمثمة السابقة, و يستخد الوس Enter لمنزوؿ إلى السطر التالي و ذلؾ ألف محارؼ الف ارغات بما فييا ليس ليا المفتاح محرؼ قيمة في لغة HTML كما ذكرنا سابقا. عناصر تنسيق النصوص Text Formatting توفر لغة HTML مجموعة مف العناصر لتنسيؽ النصوص, فمجعؿ النص عريضا Bold توفر العنصر <b> )أو العنصر,)<strong> و لجعؿ النص مائال Italic توفر العنصر <i> )أو

31 العنصر,)<em> و لوضع خط أسفؿ النص توفر العنصر <u>, و لشطب النص Delete توفر العنصر,<del> لنشاىد الشيفرة التالية عمى سبيؿ المثاؿ: <html> <head> اخزجبس ؼ بطش ر س ١ ك ا ظ ص< title > < title />طفحخ </head> <body> <p> </p> </body> This is a sample text to demonstrate <b>bold</b>, <i>italic</i>, <u>underline</u> and <del>delete</del> tags. <-- اسزخذ ب <br/> ض ي سشا احذا --!> <br/> You may use other tags to generate the same output: <br/> This is a sample text to demonstrate <strong>bold</strong>, <em>italic</em>, <u>underline</u> and <del>delete</del> tags.

32 </html> تبدو الشيفرة أعاله في المستعرض كمايمي: الشكل : 7 صفحة اختبار عناصر تنسيق النصوص ممحوظة: بالطبع ىناؾ المزيد مف عناصر تنسيؽ النصوص سيت ذكرىا في مرجع وسو HTML الفصؿ. في نياية ىذا المحارف و الرموز الخاص ة Special Characters ىناؾ بعض المحارؼ و الرموز التي ل يمكف عرضيا في الصفحة عف طريؽ كتابتيا بشكؿ مباشر مثؿ الرموز المستخدمة في الرياضيات و محارؼ الف ارغات و غيرىا, توفر لغة HTML آلية خاصة لعرض ىذه الرموز و ذلؾ باتباع الصيغة العامة التالية باستبدؿ القيمة value بقيمة &value; المحرؼ المطموب أف يت عرضو في مستعرض الويب و في الجدوؿ التالي نماذج مف ىذه المحارؼ: لمحصوؿ عمى الجدوؿ الكامؿ يمكف اتباع ال اربط التالي:

33 XHTML الرمز < > شيفرة < > محرؼ الف ارع الجدول : 2 بعض المحارف الخاصة في HTML لنشاىد المثاؿ التالي: <html> <head> <title> طفحخ اخزجبس جؼغ ا حبسف ا خبطخ </title> </head> <body> <p> 3 < 5 and 10 > 2 and also all rights reserved for Mukhtar </p> </body> </html>

34 و الذي يبدو عند عرضو في المستعرض كمايمي: الشكل : 8 مثال الستخدام بعض المحارف الخاصة في الصفحة عناصر الروابط Hyper Links,Hyper Links و توفر لغة HTML آلية لالنتقاؿ بيف الصفحات المختمفة عبر عناصر الروابط الروابط عبارة عف نصوص أو صور تنقمؾ عند النقر عمييا مف الصفحة الحالية إلى إلى صفحة ويب أخرى, تقو مستعرضات الويب بتمييز الروابط بعرض "يد صغيرة" كمؤشر لمفأرة عند اإلشارة, يت Anchor a إلى أحد الروابط, يت إنشاء الروابط و بواسطة الوس <a>, و الػ ىذه اختصار لػ تزويد عنصر ال اربط بنص ي عرض كمحتوى لو أم ا الموقع اليدؼ )الذي سيت ا لنتقاؿ إليو عند النقر,Hyper Reference فممنظر عمى ال اربط( فيت تزويده لمواصفة href و التي ىي اختصار لػ لممثاؿ التالي: <html> <head> <title> طفحخ اخزجبس ؼ بطش ا ش اثؾ </title> </head>

35 <body> <a a><br />مايكروصىفد<" href=" /> <a a><br />جىجم<" href=" /> <a href=" target="_blank" >MSN</a> <br /> a> href="firstpage.html" مثال<" target="_self < a />أول الذي يبدو عند استع ارضو بمستعرض الويب كمايمي: </body> </html> الشكل : 9 صفحة اختبار عنصر الروابط لقد قمنا بتزويد صفحتنا بمجموعة مف عناصر الروابط التي تشير إلى بعض المواقع الشييرة و قد تعمدت في ال اربط األخير ذكر اس ممؼ المثاؿ األو ؿ الذي قمنا بإنشائو معا في بداية ىذا الفصؿ و ذلؾ لتوضيح أف الروابط يمكف أف تكوف مطمقة Absolute )كالثالثة األولى( أو نسبية Relative

36 )كال اربط األخير( و يقصد بالنسبية أف ال اربط المذكور يكوف عبارة عف مسار Path ممؼ الصفحة اليدؼ بالنسبة لمصفحة الحالية و في حالتنا فقد كانت الصفحة اليدؼ firstpage.html في نفس مجمد الصفحة الحالية. href عند النقر عمى أحد ىذه الروابط سيت ا لنتقاؿ إلى ال اربط URL المذكور في الواصفة الم ارفقة لعنصر ال اربط الذي ت النقر عميو, مف الجدير بالذكر أن نا قمنا بتزويد بعض الروابط بالواصفة target و التي تحدد مكاف عرض الصفحة اليدؼ في المستعرض بمعنى أن يا تجيب عمى األسئمة التالية: ىؿ سيت عرض الصفحة اليدؼ في نفس الصفحة الحالية )في ىذه الحالة فإف قيمة الواصفة ىي القيمة,)_self ىؿ سيت عرض الصفحة اليدؼ في نافذة مستعرض جديدة ( في ىذه الحالة فإف قيمة الواصفة,)_blank ىؿ سيت عرض الصفحة اليدؼ في إطار محدد )في ىذه الحالة فإف Resource قيمة الواصفة ىي اس اإلطار و سيت تناوؿ اإلطا ارت بشكؿ مفص ؿ لحقا (. آخر ما يجب ذكره عف الروابط حاليا أن و يمكف لم اربط أف يشير إلى أي مورد متوفر عمى الويب و ليس فقط الصفحات, كما يمكف أف يشير ال اربط إلى بريد إلكتروني و ذلؾ بأف نضع القيمة mailto: قبؿ البريد اإللكتروني الذي نريد أف نضع اربطا لو, انظر المثاؿ التالي: <html> <head> <title> س اثؾ خبطخ </title> يمكنؾ تعم المزيد عف المسا ارت Paths مف خالؿ زيارة الموقع:

37 </head> <body> ا مش ب href=" a> < a /> زح ١ ا ف <br /> <a href < a />ساس <" mailto:mokhtar_ss@hotmail.com "= </body> </html> ما سيحدث عند النقر عمى ال اربط األو ؿ ىو ظيور مرب ع تحميؿ الممؼ Save File Dialog و ما سيحدث عند النقر عمى الممؼ الثاني ىو ظيور برنامج مدير البريد اإللكتروني )مثؿ Outlook )Express في وضع إرساؿ رسالة جديدة إلى البريد اإللكتروني المذكور في ال اربط. عناصر الصور Images توفر لغة HTML عنص ار خاصا لعرض الصور ضمف الصفحة ىذا العنصر ىو العنصر )اختصا ار لػ )Image الذي يقو بعرض الصورة ضمف الصفحة اعتمادا عمى مسارىا <img/> الذي يمرر لمعنصر عبر الواصفة src )اختصا ار لػ,)Source و كما ىو الحاؿ بالنسبة لمعنصر <img/> الخاص <br/> فإف العنصر ل يمتمؾ أي وس نياية و لذلؾ فإف شكمو العا في الغالب يكوف </ src="path",<img لنشاىد المثاؿ التالي: <html> <head> <title> طفحخ ؼشع ػ بطش ا ظ س </title> </head>

38 <body> <img src="mypic.jpg" /> /> "انصىرج انثاويح"= alt <img src="mypic2.gif" <img src="mypic.jpg" ا ثب ثخ"= alt "ا ظ سح width="100px" height="50px" /> </ "ط سر راد ا سبس ا خبؿئ"= alt " سبس خبؿئ"= src <img </body> </html> و الذي يبدو عند عرضو في المستعرض كمايمي: الشكل : 11 صفحة اختبار لعنصر الصور كما تالحظ فقد قا عنصر عرض الصور بعرض الصور ذات المسا ارت المذكورة في كؿ وس alt و مف واصفات ىذا العنصر الواصفة,<img/> التي تسند إلييا قيمة نصي ة يت عرضيا في حاؿ تعذر الوصوؿ إلى الصورة المذكورة في الواصفة src و ىذه الحالة حدثت معنا في الصورة ال اربعة و التي زودناىا بمسار خاطئ عف قصد لعرض ىذه الحالة, كما يمكف عرض الصورة width و التي height بمقاس محدد و ذلؾ عبر تزويد العنصر img بواصفتي ا لرتفاع و العرض

39 تسند إلييما قي رقمي ة تحدد عرض و ارتفاع الصورة المعروضة بالبكسؿ)ىذا ما تعنيو px المسندة لياتيف الواصفتيف(. في القي ممحوظة: عمى فرض أف صفحتنا تحتوي صور فإف عرض الصفحة بشكؿ تا و صحيح سيحتاج لتحميؿ ممفات ىي ممؼ الصفحة و ممفات الصور الخمسة و ىذا ما قد يسبب حمال ازئدا عمى موقعؾ مستقبال في حاؿ اإلف ارط في استخدا الصور. الصور بدال من نصوص الروابط مف الشائع في مواقع الويب أف يت استبداؿ نصوص محتوى عناصر الروابط <a> بالصور و ذلؾ لتجميؿ محتوى الموقع بحيث يت ا لنتقاؿ لمصفحة اليدؼ لم اربط عند النقر عمى الصورة بد ل مف <a> النقر عمى النص و يت ذلؾ بتضميف العنصر <img/> كمحتوى لمعنصر و فيمايمي نعرض مثا ل بسيطا لذلؾ: <html> <head> <title> ػشع ط سح و حز شاثؾ </title> </head> <body> <a href = "mailto:mokhtar_ss@hotmail.com"> /> "راصهىي"= alt <img src="mypic.jpg" </a> </body> </html>

40 و ىذا ما يبدو في المستعرض كمايمي: الشكل : 11 استخدام الصور بدال عن النصوص كمحتوى لمروابط الخ ارئط الصوري ة Image Maps الخ ارئط الصوري ة تعني جعؿ أج ازء محد دة مف صورة ما روابطا, و يت ىذا عمى ثالث م ارحؿ, األولى ىي أف يت وضع الصورة في الصفحة بشكؿ تقميدي عف طريؽ الوس,<img/> أما الثانية فيي إنشاء عنصر الخريطة مع إسناد قيمة الواصفة name الخاصة بو كاس لمخريطة و <map> مف ث إنشاء مجموعة مف عناصر بإحداثيات المناطؽ التي ستتحوؿ إلى روابط في <area> الصورة, و المرحمة الثالثة تت بربط عنصر الخريطة و عنصر الصورة و ذلؾ بإسناد اس الخريطة إلى الواصفة usemap الخاصة بعنصر الصورة, لنشاىد المثاؿ التالي: ػ أحذ ا ى اوت ؼشع ؼ بد ػ < p > < p />ا مش <html> <body> <img src="planets.gif" width="145" height="126" "ا ى اوت"= alt usemap="#planetmap" /> <map name="planetmap">

41 "انشمش"= alt <area shape="rect" coords="0,0,82,126" href="sun.htm" /> "انمريخ"= alt <area shape="circle" coords="90,58,3" href="mercur.htm" /> "انزهرج"= alt <area shape="circle" coords="124,58,8" href="venus.htm" /> يبدو المثاؿ التالي في المستعرض كمايمي: </body> </html> </map> الشكل : 12 مثال عمى صنع خريطة صورية كما تالحظ فقد تمت إضافة الصورة بشكؿ طبيعي أو ل, ث بدأنا بإنشاء الخريطة و أعيطناىا بالسطر: اسما <map name="planetmap">

42 بعد ذلؾ قمنا بإنشاء منطقة لكؿ كوكب مف الكواكب عبر الوس area و الذي لو واصفتاف األولى لتحديد شكؿ المنطقة )مستطيمة, دائرية.. إلخ(, أم ا الثانية فيي واصفة اإلحداثيات حيث ت تمرير أربعة إحداثيات في حالة المستطيؿ لتحديد أبعاد المستطيؿ يمثؿ shape coords اإلحداثياف األوؿ و الثاني الركف األيسر العموي مف المستطيؿ بينما يمثؿ اإلحداثياف الثالث و ال اربع الركف األيمف السفمي مف المستطيؿ و ىذا كاؼ لتحديده, و بالطبع ت ىذا عمى اعتبار أف مركز الجممة الديكارتي ة لمصورة ىو الركف األيسر العموي مف الصورة, و بيذا فإف النقطة ), ( و النقطة )82,126( تحدداف منطقة كوكب الشمس بالمستطيؿ المرسو بينيما, أم ا في حالة المنطقة الدائرية فيت تمرير ثالثة إحداثيات يعبر األوؿ و الثاني عف نقطة مركز الدائرة و يعبر الثالث عف نصؼ قطرىا. الشكل : 13 شكل تخيمي لتوضيح المبدأ الهندسي في رسم المناطق و في النياية قمنا بتمرير اس الخريطة إلى الواصفة usemap الخاصة بالصورة. ممحوظة: يت تمرير اس الخريطة إلى الواصفة usemap مسبوقا بالرمز # الروابط الداخمي ة Internal Linking أحيانا يكوف المحتوى الموجود ضمف صفحة معي نة كبي ار إلى حد ما و في حالة مثؿ ىذه يصبح ا لنتقاؿ إلى فقرة محددة ضمف الصفحة عممية تستغرؽ بعض الجيد و الوقت, توف ر لغة HTML آلي ة لالنتقاؿ إلى جزء محدد مف الصفحة مباشرة عبر ما يعرؼ بالروابط الداخمية Internal Links

43 و التي يت تحقيقيا عبر استخدا وس ال اربط <a> و تمرير معر ؼ العنصر الم ارد ا لنتقاؿ إليو كقيمة لمواصفة href بالشكؿ التالي: a> href="#id"> id إ ا ؼ ظش ر ا ؼشف < a />ا زم حيث أف id يمثؿ معرؼ العنصر الم ارد ا لنتقاؿ إليو ضمف الصفحة التالي المثاؿ و يوض ح ىذه الفكرة: <html> <head> <title> ثبي ػ ا ش اثؾ ا ذاخ ١ خ </title> </head> <body> a> ا فمشح ا شاثؼخ<" href="#para4 < a />إ األ < h1 > < h1 />ا فمشح حز ا فمشح األ < p > < p /> ب ا ثب ١ خ< h1 > < h1 />ا فمشح حز ا فمشح ا ثب ١ خ< p > < p /> ب ا ثب ثخ< h1 > < h1 />ا فمشح حز ا فمشح ا ثب ثخ< p > < p /> ب h1> ا شاثؼخ<" id="para4 < h1 />ا فمشح حز ا فمشح ا شاثؼخ< p > < p /> ب </body> </html>

44 القوائم Lists توفر لغة HTML نوعيف مف عناصر القوائ:.<ul> القوائ غير المرتبة Unordered List عبر الوس -.<ol> القوائ المرتبة Ordered List عبر الوس - بعد أف نقو بتحديد نوع القائمة التي نرغب بإنشائيا نضيؼ محتواىا كمجموعة مف عناصر <li> و التي تعني,List Item لنشاىد المثاؿ التالي و الذي يعرض كيفي ة إنشاء قائمة غير مرتبة بسيطة: و الذي يبدو عند عرضو في المستعرض كمايمي: <html> <head> ػ لبئ خ غ ١ ش شرجخ< title > < title /> ثبي </head> <body dir="rtl"> ف زا ا ىزبة< p > < p />س زؼ <ul> <li>html</li> <li>html5</li> <li>xhtml</li> <li>css</li> <li>css3</li> </ul> </body> </html>

45 الشكل : 14 مثال لقائمة غير مرتبة بسيطة </ol> <ol> </ul> بتغيير وسمي البداية و النياية لعنصر القائمة مف <ul> و إلى و ستصبح القائمة مرتبة بالشكؿ التالي: الشكل : 15 مثال عمى قائمة مرتبة بسيطة

46 HTML بالطبع و كما ذكرت منذ بداية ىذا الفصؿ فإف أي عنصر مف عناصر يمكف أف يحوي بيف وسمي بدايتو و نيايتو أية مجموعة أخرى مف العناصر و ىذا يعني أننا نستطيع إنشاء قائمة تحوي قوائ فرعي ة كعناصر ليا, و المثاؿ التالي يوضح ىذه الفكرة: <html> <head> ػ لبئ خ ؼمذح< title > < title /> ثبي </head> <body dir="rtl"> ف زا ا ىزبة< p > < p />س زؼ <ol> <li> HTML <ul> < li />انرواتط< li > < li />انصىر< li > انقىائم< li > <ul> < li />انمرذثح< li > انمرذثح< li > < li />غير </ul> </li> </ul> </li> <li>html 5</li>

47 <li>xhtml</li> <li>css</li> <li>css 3</li> </ol> </body> </html> يبدو المثاؿ أعاله في المستعرض كمايمي: type الشكل : 16 مثال عمى قائمة معقدة آخر ما يجب ذكره عف القوائ أن و يمكف استخدا الواصفة لتغيير شكؿ القائمة ففي حالة circle disc القوائ غير المرتبة يمكف إسناد إحدى القي التالية إلييا: square لوضع رمز أو أو المربع أو القرص أو الدائرة أما كؿ عنصر عمى الترتيب, و في حالة القائمة المرتبة يمكف إسناد

48 type i I a A إحدى القي إلى الواصفة أو أو أو أو لتحويؿ الترقي إلى ترقي بأرقا عربية, ترقي بأحرؼ إنجميزية كبيرة, ترقي بأحرؼ إنجميزية صغيرة, ترقي بأرقا لتينية كبيرة, ترقي بأرقا لتينية صغيرة عمى الترتيب. يوجد نوع خاص مف القوائ يعرؼ بقوائ المصطمحات يت إنشاؤه باستخدا الوس <dl> لعنصر <dd> القائمة و الوس <dt> لعنصر المصطمح و الوس لعنصر تعريؼ المصطمح, لنشاىد المثاؿ التالي: <html> <head> ػ لبئ خ ظ حبد< title > < title /> ثبي </head> <body dir="rtl"> <dl> <dt>html</dt> <dd>hyper Text Markup Language</dd> <dt>xhtml</dt> <dd>extensible Hyper Text Markup Language</dd> <dt>css</dt> <dd>cascading Style Sheet</dd> </dl> </body> </html> تبدو قائمة المصطمحات في المستعرض كمايمي:

49 الشكل : 17 هكذا تبدو قائمة المصطمحات في المستعرض الجداول Tables <table> توفر لغة HTML آلية إلنشاء الجداوؿ عبر العنصر و يت ذلؾ عبر إنشاء العنصر border أو ل و تمرير واصفتي العرض width و عرض الحدود بالبكسؿ, و مف ث <table> إنشاء محتويات الجدوؿ عبر عنصر أسطر الجدوؿ table rows و الذي يت تحقيقو باستخدا table data الوس,<tr> ث يت ذكر محتويات خاليا كؿ سطر مف أسطر الجدوؿ عمى حدى و ذلؾ عبر الوس,<td> و لتسييؿ حفظ الوسو يمكف تمثيميا بشكؿ مرئي كمايمي: الشكل : 18 شكل تخيمي لتوضيح الوسوم المستعممة إلنشاء الجدول و لتطبيؽ ىذا المفيو عمميا بغية توضيحو أكثر دعنا نشاىد الشيفرة التالية التي تقو بإنشاء جدوؿ بسيط:

50 <html> <head> ػ إ شبء جذ ي ثس ١ ؾ< title > < title /> ثبي </head> <body dir="rtl"> <table border="1" width="50%"> <tr> انكراب< td > < td />اصم < td />انضعر< td > </tr> <tr> انىية< td > < td />ترمجح <td>051</td> </tr> <tr> انجىال< td > < td />ترمجح <td>011</td> </tr> <tr> األنعاب< td > < td />ترمجح <td>051</td> </tr> <tr> انطثخ< td > < td />ذعهم <td>51</td>

51 </tr> </table> </body> </html> يبدو ىذا الجدوؿ عند عرضو في مستعرض الويب كمايمي: الشكل : 19 مثال عمى إنشاء جدول بسيط width كما أرينا فقد قمنا أو ل بإنشاء عنصر الجدوؿ <table> بعرض % مف العرض الكمي لمصفحة )حاوؿ تغيير حج نافذة المستعرض لتالحظ أف ذلؾ يبقى صحيحا!(,و بعرض حدود بكسؿ, ث قمنا بإنشاء سطر جديد باستخدا الوسميف,<tr></tr> يحوي ىذا السطر border عمى خميتيف <td></td> تحوي األولى القيمة "اس الكتاب" و تحوي الثانية القيمة "السعر", ث قمنا بتك ارر نفس األسموب مع األسطر األخرى التي تحوي بيانات الكتب, أظف أف الموضوع أصبح واضحا اآلف. ممحوظة: يمكف إعطاء قيمة عرض الجدوؿ بالبكسؿ أيضا أو بأي واحدة قياس مف الواحدات المدعومة في لغة HTML و التي سيت ذكرىا لحقا.

52 يقس كؿ جدوؿ مف جداوؿ HTML إلى أربع مناطؽ: <thead> ي نشأ ىذا القس باستخدا الوسميف :Table Head و - منطقة أرس الجدوؿ و يحوي في الغالب عمى عنصر سطر <tr></tr> يحوي بيف وسمي بدايتو و </thead> نيايتو عناويف أعمدة الجدوؿ في خاليا مف النوع <th> بد ل مف,<td> حيث ت <th> table data ا لصطالح أف <td> تعني خمية بيانات في حيف أف تعني خمية عنواف.table heading <tbody> ي نشأ ىذا القس باستخدا الوسميف :Table Body و - منطقة جس الجدوؿ و يحوي عمى سطور البيانات و التي تنشأ باستخدا <tr> و بما أف خالياىا </tbody> تحوي معمومات فإف الخاليا تنشأ باستخدا الوسو.<td> <tfoot> ي نشأ ىذا القس باستخدا الوسميف :Table Foot و - منطقة ذيؿ الجدوؿ و يحوي في الغالب عمى عنصر سطر <tr></tr> يحوي بيف وسمي بدايتو و </tfoot> نيايتو ممخصات عف أعمدة الجدوؿ في خاليا مف النوع.<th> - عنواف الجدوؿ :Caption ي ضاؼ عنواف الجدوؿ بكتابة نص العنواف بيف وسمي و,</caption> يوض ح الشكؿ التالي مناطؽ الجدوؿ المختمفة: <caption> الشكل : 21 رسم توضيحي ألقسام الجدول في HTML

53 لتحقيؽ الجدوؿ المذكور في صفحتنا سنكتب شيفرة HTML التالية: <html> <head> ػ إ شبء جذ ي ثب < title > < title /> ثبي </head> <body dir="rtl"> <table border="1" width="50%"> شراء انكرة< caption > < caption />فاذىرج <thead> <tr> انكراب< th > < th />اصم < th />انضعر< th > </tr> </thead> <tbody> <tr> ا ٠ ت< td > < td />ثش جخ <td>150</td> </tr> <tr> ا ج اي< td > < td />ثش جخ

54 <td>200</td> </tr> <tr> األ ؼبة< td > < td />ثش جخ <td>350</td> </tr> <tr> ا جخ< td > < td />رؼ <td>50</td> </tr> </tbody> <tfoot> <tr> < th />انمجمىع< th > <th>750</th> </tr> </tfoot> </table> </body> </html> تبدو ىذه الشيفرة في مستعرض الويب كمايمي:

55 الشكل : 21 مثال إلنشاء جدول HTML مثالي كما تالحظ فإف العنواف يظير أعمى الجدوؿ, كما أف األسطر الموجودة في منطقتي ال أرس و الذيؿ تظير بخط عريض.bold الجداول غير البسيطة في الحقيقة ما ت استع ارضو في الفقرة الماضية كاف جميال و بسيطا أيضا فبالنسبة لحالة مثؿ حالة فاتورة الش ارء فإف جدو ل بعموديف و بمجموعة مف األسطر أمر بسيط و لكف ماذا عف الحا لت األعقد, ماذا عف الحا لت التي ل تكوف فييا الخاليا متساوية األحجا, و ل األسطر متساوية عدد الخاليا, تجيب عمى ىذه التساؤ لت المحق ة عبر تقدي الواصفتيف rowspan و HTML.colspan تستخد الواصفتاف و مع وس بداية الخمية <th> و تسند إلييما أو <td> colspan rowspan قيمة رقمية صحيحة ) أو أو.. إلخ( تغير مف حج الخمية فتجعميا بحج خميتيف أو ثالث أو أربع.. إلخ, حيث أف تتحك بعرض الخمية, أما colspan فتتحك بارتفاع الخمية. rowspan لنشاىد الشيفرة التالية عمى سبيؿ المثاؿ:

56 <html> <head> ػ إ شبء جذ ي غ ١ ش ثس ١ ؾ< title > < title /> ثبي </head> <body dir="rtl"> <table border="1" width="100%"> <tbody> <tr> ا ىزبة< td > < td />اس رؼ < td > jquery < td />ف 021 دل ١ مخ <td rowspan="3"> <img src="jquery120.png"> </td> </tr> <tr> < td />ا ؤ ف< td > س ١ ذ طب ح< td > < td /> خزبس </tr> <tr> اإلطذاس< td > < td />س خ <td>2010</td> </tr> <tr> <td colspan="3"> ٠ مذ زا ا ىزبة ؼ بد ػ ىزجخ jquery

57 ثشى جسؾ اػح... إ خ. </td> </tr> </tbody> </table> </body> </html> تبدو الشيفرة السابقة عند عرضيا في المستعرض كمايمي: الشكل : 22 مثال عمى إنشاء جدول غير بسيط باستخدام الواصفتين rowspan و colspan كما ترى فإف الجدوؿ يتكوف مف أربعة سطور يحوي السطر األو ؿ عمى ثالث خاليا واحدة منيا بارتفاع يعادؿ ارتفاع ثالثة أسطر مجتمعة )ىذا ما تعنيو,)"rowspan="3 أم ا السطر األخير مف الجدوؿ فيحوي عمى خمية واحدة بعرض أعمدة الجدوؿ الثالثة مجتمعة )و ىذا ما تعنيو

58 colspan rowspan أظف أف استخدا الواصفتيف,)"colspan="3 و أصبح واضحا اآلف, و بالنسبة ألصدقائي الذيف ل تتضح الصورة بالنسبة لي فأعتذر مني و أنصحي أف يقوموا بتغيير colspan القي المذكورة في الواصفتيف rowspan و في المثاؿ السابؽ و يالحظوا الفرؽ الحاصؿ في أحجا الخاليا فيذا يساعد كثي ار في تشكيؿ تصو ر أفضؿ لديي كما أظف. ممحوظة: ليطمئف قمبي أحب أف أذكرؾ أنو بإمكانؾ وضع أي مف عناصر HTML كمحتوى في خاليا الجدوؿ. النماذج Forms تستخد النماذج في لغة لستقباؿ المدخالت Inputs مف المستخد بغية عرضيا HTML Forms أو تخزينيا أو القيا بعمميات معالجة معينة عمييا, يت إنشاء النماذج باستخدا الوسميف <form> و الذاف سيحوياف بينيما مجموعة مف عناصر اإلدخاؿ <input> مثؿ مربعات </form> النصوص و عناصر ا لختيار buttons و القوائ و األز ارر check boxes text boxes المنسدلة..select lists إلخ. يت تزويد وس بداية عنصر النموذج بواصفتيف أساسيتيف األولى ىي الواصفة action و <form> التي تحدد اس الممؼ البرمجي الذي سيقو بمعالجة البيانات المدخمة في النموذج و يكوف الممؼ البرمجي مكتوبا بإحدى لغات البرمجة مف طرؼ السيرفر PHP أو مثؿ Server Side أو أو.. إلخ )و البرمجة مف طرؼ السيرفر موضوع خارج نطاؽ ىذا الكتاب(, JSP ASP.NET أم ا الواصفة الثانية فيي الواصفة method المذكور سابقا بإحدى طريقتيف: و التي تحدد طريقة إرساؿ البيانات إلى الممؼ البرمجي الطريقة األولى ىي الطريقة حيث يت إرساؿ البيانات في شريط العنواف في get - المستعرض بعد اس الممؼ البرمجي بشكؿ أزواج مفتاح/قيمة, انظر لم اربط التالي عمى سبيؿ المثاؿ:

59 eer كما تالحظ فإف الممؼ البرمجي في ىذه الحالة ىو أم ا القي المرسمة فيي: job = ComputerEngineer و = 23 age name = Mukhtar و الطريقة الثانية ىي الطريقة post حيث يت إرساؿ البيانات بشكؿ غير ظاىر في شريط العنواف )في الحقيقة يت إرساليا مع ترويسة طمب.)HTTP بما أننا -في ىذا الكتاب- سنيت بكيفية إنشاء النماذج فقط و لف نناقش كيفية معالجة الطمبات method فبإمكانؾ اآلف تجاىؿ ما ت ذكره عف الواصفة و التركيز عمى كيفية بناء النماذج. بعد إنشاء العنصر <form> سنقو بوضع مجموعة مف عناصر اإلدخاؿ بيف وسمي بدايتو و نيايتو باستخدا الوس <input> و طبعا سيت تزويد كؿ عنصر إدخاؿ باس فريد ي س ن د كقيمة type لمواصفتيف name و,id و مف ث سيت تحديد نوع عنصر اإلدخاؿ عبر الواصفة و الجدوؿ التالي يوضح القي الممكنة و ما يمثمو كؿ منيا: القيمة button checkbox file hidden password radio reset ما تمثمه زر أوامر عنصر اختيار متعدد مربع لختيار ممؼ بغية رفعو إلى الموقع عنصر إدخاؿ مخفي عنصر إدخاؿ كممة المرور عنصر اختيار فردي زر إلعادة ضبط القي ا لفت ارضية لعناصر

60 اإلدخاؿ كاممة في النموذج زر موافؽ )إرساؿ الطمب( مربع إدخاؿ نص الجدول : 3 القيم المختمفة لمواصفة type الخاصة بعنصر >input< submit text ل تقمؽ إف بدت لؾ المعمومات كثيرة و معقدة و تابع معي الشيفرة التالية: <html> <head> <title> ثبي ػ إ شبء رج ثس ١ ؾ </title> </head> <body dir="rtl"> <form method="get" action="file.php"> االصم : <input type="text" name="nametext" id="nametext" /> <br/> كهمح انمرور : <input type="password" name="pass" id="pass" /> <br/> <input type="submit" name="okbutton" id="okbutton" </ "مىافك"= value </form> </body> </html>

61 و التي تبدو عند عرضيا في مستعرض الويب إدخاؿ و بعد بعض البيانات كمايمي: الشكل : 23 مثال عمى إنشاء نموذج بسيط حسنا الموضوع بسيط كما أريت, دعنا نقو بتطوير نموذجنا ىذا ليشمؿ مجموعة أخرى مف عناصر اإلدخاؿ عمى سبيؿ التجربة, انظر لمشيفرة التالية: <title> ػ إ شبء رج أػمذ ل ١ ل < title /> ثبي <html> <head> </head> <body dir="rtl"> <form method="get" action="file.php"> name="nametext" <input type="text" االس : id="nametext" /> <br/> name="pass" <input type="password" و خ ا ش س: id="pass" /> <br/>

62 id="pic"> name="pic" <input type="file" ا ظ سح ا شخظ ١ خ: <br/> <input type="reset" name="resbtn" id="resbtn" </ "اسزؼبدح"= value <input type="submit" name="okbutton" id="okbutton" </ " افك"= value تبدو الشيفرة السابقة في مستعرض الويب كمايمي: </form> </body> </html> الشكل : 24 إنشاء نموذج أعقد بقميل و لكف ماذا عف عناصر ا لختيار و checkbox radio ميال!.. حسنا, في الواقع يت استعماؿ ىذه العناصر في النماذج بغية تمكيف المستخد مف اإلجابة عمى )radio أو سؤاؿ محدد و ذلؾ باختيار جواب واحد فقط مف عدة إجابات محتممة )في حالة عنصر اإلجابة عمى سؤاؿ محدد باختيار أكثر مف جواب )في حالة عنصر )checkbox و يت استخدا

63 ىذه العناصر بنفس الطريقة السابقة مع ممحوظة إعطاء جميع العناصر التي تمثؿ إجابة لنفس السؤاؿ القيمة name لمواصفة ذاتيا و قيما مختمفة لمواصفة,value لنشاىد المثاؿ التالي: <html> <head> <title> radio checkbox ػ اسزخذا < title /> ثبي </head> <body dir="rtl"> <form method="post" action="file.php"> أ ٠ ػ ذ ػ لؼ ب < p > <p/> جش ٠ ذح <input type="checkbox" name="wrknow" value="npaper" /> لغ إ ىزش <input type="checkbox" name="wrknow" value="wbsite" /> طذ ٠ ك <input type="checkbox" name="wrknow" value="frnd" /> حشن ثحث <input type="checkbox" name="wrknow" value="sreng" /> رم ١١ ه لؼ ب < p > < p /> ب ج ١ ذ <input type="radio" name="rate" value="good" /> ز سؾ <input type="radio" name="rate" value="mid" /> س ء <input type="radio" name="rate" value="bad" />

64 </form> </body> </html> و الذي يبدو في المستعرض كمايمي: الشكل : 25 مثال عمى استخدام checkbox و radio ىناؾ طريقة أخرى لتحقيؽ شيء مشابو لعنصر مف حيث اليدؼ و لكنو يستخد في حاؿ radio وجود بدائؿ كثيرة )أجوبة كثيرة محتممة لمسؤاؿ( و ىو عنصر القائمة المنسدلة و يت تحقيقو عبر الوس أم ا عناصر القائمة فيت تحقيقيا مف خالؿ الوس <option> و يت تحديد أحد <select> ىذه العناصر كخيار افت ارضي عف طريؽ تمرير الواصفة selected="selected" لنشاىد المثاؿ التالي: في وس بدايتو, <html> <head> <title>select ػ اسزخذا < title /> ثبي </head> <body dir="rtl">

65 <form method="post" action="file.php"> أ ا ج ذا أ ذ < p > <p/> <select name="nationality"> <option < option />صىريا<" selected="selected < option />انعراق< option > < option />نثىان< option > < option />فهضطيه< option > < option />األردن< option > < option />انمغرب< option > < option />انجزائر< option > </select> </form> </body> </html> و الذي يبدو في المستعرض كمايمي: الشكل : 26 مثال عمى استخدام عنصر select

66 بقي عنصر إدخاؿ أخير لمناقشتو ىنا <textarea> ىو العنصر و و الذي يستخد إلدخاؿ قيمة text <input> نصية متعددة األسطر عمى عكس العنصر مف النوع و الذي يستخد إلدخاؿ قيمة نصية وحيدة السطر. rows cols لمعنصر يمرر <textarea> قي عددية صحيحة عبر الواصفتيف و لتحديد عرضو و ارتفاعو, انظر الشيفرة التالية: <html> <head> <title> ثبي ػ اسزخذا textarea </title> </head> <body dir="rtl"> <form method="post" action="file.php"> جزح لظ ١ شح ػ ه< p > < p />اوزت <textarea cols="30" rows="10" name="bio"> </textarea> و الذي يبدو عند استع ارضو في مستعرض الويب كمايمي: </form> </body> </html>

67 الشكل : 27 مثال عمى استخدام العنصر textarea تقسيم عناصر اإلدخال إلى مجموعات يمكف تقسي عناصر اإلدخاؿ في النماذج الكبيرة إلى أقسا منطقية يوضع كؿ منيا في إطار مستقؿ و ىذا ما توفره لغة باستخدا الوسميف و </fieldset> المذاف <fieldset> HTML سيحوياف بينيما مجموعة عناصر اإلدخاؿ و يت تزويد مجموعة بعنواف كؿ عبر الوس توضيحي,<legend> كما يمكف منح كؿ عنصر مف عناصر اإلدخاؿ عنوانا يدؿ عمى ماىي ة المعمومات المدخمة فيو عف طريؽ الوس بتمرير اس عنصر اإلدخاؿ إلى واصفة for الخاصة <label> بعنصر العنواف,<label> دعنا نشاىد المثاؿ التالي: <html> <head> <title> ثبي ػ اسزخذا fieldset </title> </head>

68 <body dir="rtl"> <form method="get" action=""> <fieldset> انشخصيح< legend > < legend />انثياواخ <label < label />االصم<" for="nametxt <input type="text" name="nametxt" id="nametxt" maxlength="50" /> <br/><br/> <label < label />انعمر<" for="agetxt <input type="text" name="agetxt" id="agetxt" maxlength="2" /> </fieldset> <br/> <fieldset> انعمم< legend > < legend />مهاراخ C# <input type="checkbox" name="prog" value="cs"/> VB.NET <input type="checkbox" name="prog" value="vb"/> F# <input type="checkbox" name="prog" value="fs"/> C++.NET <input type="checkbox" name="prog" value="cpp"/>

69 </fieldset> <fieldset> /> "إسسبي"= value <input type="submit" </fieldset> تبدو الشيفرة السابقة كمايمي في مستعرض الويب: </form> </body> </html> الشكل : 28 مثال عمى استخدام fieldset اإلطا ارت Frames تسمح لؾ لغة HTML بتضميف صفحات ويب ضمف صفحات أخرى, و ذلؾ عبر استخدا اإلطا ارت.Frames

70 يت استعماؿ اإلطا ارت في الصفحة عمى مرحمتيف, األولى بإنشاء حاوية اإلطا ارت باستخدا الوس <frameset> و الذي يحدد بداية عدد اإلطا ارت التي سيت تضمينيا, و الحج الذي سيأخذه كؿ إطار مف حج الصفحة الكمي, و يت تحديد الحج بالبكسؿ أو بالنسبة المئوية, أم ا المرحمة الثانية فيت فييا إضافة اإلطا ارت بيف وسمي البداية و النياية لمعنصر <frameset> و ذلؾ باستخدا src الوس <frame> و إسناد مسار الصفحة التي سيحوييا اإلطار لمواصفة, لنشاىد المثاؿ التالي لصفحة ويب تض إطاريف األو ؿ بحج قدره % مف حج الصفحة الكمي و الثاني بالحج الباقي مف الصفحة: <html> </html> <frameset cols="30%,*"> <frame src="page_1.htm" /> <frame src="page_2.htm" /> </frameset> يبدو ىذا في مستعرض الويب كمايمي: الشكل : 29 استخدام اإلطا ارت بشكل عمودي

71 ممحوظة: الصفحة التي تستعمؿ فييا اإلطا ارت ل تحوي عمى وس.<body> يمكف أف يقو المستخد بتغيير حج اإلطا ارت عف طريؽ تحريؾ الخط الفاصؿ بينيما و الظاىر بوضوح في الشكؿ السابؽ )انظر الشكؿ (, يمكف إلغاء ىذا السموؾ لإلطا ارت عف طريؽ إضافة.<frame> الواصفة noresize="noresize" إلى وسو في المثاؿ السابؽ كانت اإلطا ارت بشكؿ عمودي و ليذا ت استعماؿ الواصفة cols,<frameset> و يمكف جعؿ اإلطا ارت بشكؿ أفقي عف طريؽ استبداؿ الواصفة مع الوس cols بالواصفة,rows لتصبح الصفحة كمايمي في مستعرض الويب: الشكل : 31 استخدام اإلطا ارت بشكل أفقي تذكرة: يمكف جعؿ ال اربط يعرض محتواه في إطار معي ف عف طريؽ إسناد اس اإلطار إلى واصفة target الخاصة بال اربط <a> )انظر فقرة الروابط التشعبي ة.)Links في حيف أف الوسميف و <frame> يستخدماف إلنشاء صفحة أ تض مجموعة مف <frameset> فقط الصفحات في إطا ارتيا فإف لغة توفر الوس <iframe> لتضميف صفحة ويب في HTML

72 صفحة أخرى بشكؿ متناسؽ مع بقية محتوى الصفحة, و يستخد الوس <iframe> التالية: بالصيغة <iframe src="url"></iframe> حيث أف URL ىو مسار الصفحة التي سيت تضمينيا, و يمكف ضبط حج اإلطار عف طريؽ width الواصفتيف height و بالبكسؿ أو بالنسبة المئوية. آخر ما يجب ذكره ىنا أف ىناؾ مستعرضات ل تدع اإلطا ارت, كما أف اإلطا ارت ستمغى مستقبال مف المغة, عمى الرغ مف أف بعض المستعرضات ما ازلت تدعميا إلى تاريخ كتابة ىذه األسطر. عناصر ال Meta ذكرت في بداية ىذا الفصؿ أف ىناؾ عناصر غير مرئية تضاؼ في منطقة أرس الصفحة بيف وسمي و </head> تستخدميا محركات البحث مف أجؿ تصنيؼ صفحتؾ و عرضيا <head> ضمف نتائج البحث, و ىذه العناصر ىي عناصر الػ,meta و بالطبع فمف األىمية بمكاف جعؿ محركات البحث تصن ؼ صفحتؾ بشكؿ صحيح كي ل تخسر معظ زوار موقعؾ القادميف إثر عممية بحث ما عمى أحد محركات البحث. content name meta يت تحقيؽ عناصر الػ meta مف خالؿ الوس و بتمرير اس و محتوى لعنصر الػ كواصفتيف لو, و لعؿ أى عنصري في أي صفحة ويب ىما العنص ارف meta meta المذاف يحمالف ا لسميف و المذاف,description و يستخدماف كمايمي: keywords <html> <head> <meta name="keywords" content="xhtml website test meta head"/> <meta name="description" content="this page demonstrates how to use meta elements"/>

73 </head> ا ظفحخ ا بئ فؼ ١ ب س ١ ى ب< body > < body /> حز </html> Keywords حيث يعرض عنصر الػ Meta ذو ا لس مجموعة مف الكممات المفتاحية التي تظف أف المستخدميف سيبحثوف عف أحدىا ضمف المستعرض و الموجودة في صفحتؾ, أما عنصر الػ ا لس ذو Description فيحوي وصفا مختص ار عف المحتوى الذي تقدمو صفحتؾ. Meta بالطبع عند عرض ىذه الصفحة في مستعرض الويب ل تتوقع أف تشاىد محتوى عناصر الػ Meta ظاى ار فميم ة ىذه العناصر كما قمنا ىو تقدي بيانات عف البيانات الموجودة ضمف صفحتؾ. HTML و بانتياء حديثنا عف عناصر الػ Meta أنيينا قد نكوف -بفضؿ اهلل- مناقشة لغة بأغمب وسوميا, و سنتابع في الصفحات التالية استع ارض وسو HTML العصري ة و التي تعرؼ باس, و لكف قبؿ ذلؾ سنستعرض لغة الموس عة أو ما ي عرؼ بػ,XHTML أم ا اآلف HTML HTML5 فأرى أف نعرض جدو ل بوسو HTML التقميدي ة ليكوف مرجعا سريعا عند الحاجة.

74 دليل وسوم HTML الوسم  <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area /> <b> <base /> <basefont /> <bdo> <big> <blockqoute> <body> <br /> <button> <caption> <center> <cite> <code> <col /> <colgroup> الشرح تعميؽ لتحديد نوع المستند )سيت الحديث عنو عند عرض )XHTML اربط تشعبي اختصار لمصطمح إنجميزي مركب اختصار لمصطمح إنجميزي إضافة معمومات اتصاؿ بمالؾ الصفحة تضميف تطبيؽ Applet ضمف الصفحة تعريؼ منطقة ضمف الخريطة الصوري ة نص عريض تعريؼ بادئة افت ارضية لمسا ارت الروابط تعريؼ نوع/لوف/حج خط افت ارضي لنصوص لمصفحة تعريؼ اتجاه النص نص كبير الحج اقتباس طويؿ جسد الصفحة سطر جديد زر إرساؿ عنواف الجدوؿ لتوسيط المحتوى اقتباس متوسط شيفرة برمجية تعريؼ واصفات مشتركة ألعمدة الجدوؿ تعريؼ مجموعة مف أعمدة الجدوؿ لتطبيؽ واصفات مشتركة عمييا

75 وصؼ لمصطمح ضمف قائمة المصطمحات نص مشطوب تعريؼ مصطمح ضمف قائمة المصطمحات قائمة مجمدات قس مف المستند قائمة المصطمحات عنصر قائمة خاص بقائمة المصطمحات نص مشدد عميو مجموعة حقوؿ في نموذج تعريؼ حج/نوع/لوف الخط لنص معيف نموذج إطار مجموعة إطا ارت عناصر العناويف أرس المستند خط أفقي عنصر بداية المستند مائؿ إطار كعنصر مف عناصر الصفحة صورة عنصر إدخاؿ نص تحتو خط إنشاء فيرس قابؿ لمبحث يتعمؽ بالصفحة نص بخط حاسوبي برمجي عنواف لعنصر ما <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame /> <frameset> <h6> إلى <h1> <head> <hr /> <html> <i> <iframe> <img /> <input /> <ins> <isindex> <kbd> <label>

76 عنواف لمجموعة عناصر اإلدخاؿ <fieldset> عنصر القائمة ربط المستند بمستند آخر )سيمر معنا أحد استعما لتو في الفصؿ الثاني( تعريؼ خريطة صورية تعريؼ قائمة بيانات تعريفية عف ماىي ة محتوى المستند إلنشاء بديؿ لمحتوى اإلطار في المستعرضات التي ل تدع اإلطا ارت إلنشار بديؿ لمحتوى السكربت في المستعرضات التي ل تدع السكربت تضميف كائف برمجي قائمة مرتبة مجموعة مف الخيا ارت المرتبطة منطقيا ضمف خيا ارت القائمة المنسدلة خيار في قائمة منسدلة نص وسيط لمكائف البرمجي نص منسؽ مسبقا اقتباس قصير نص مشطوب نموذج لشيفرة برمجية سكربت برمجي Script( Java أو jquery غالبا ( قائمة منسدلة نص صغير الحج تعريؼ قس سطري مف المستند نص مشطوب نص عريض تعريؼ ورقة أنماط )يناقش في الفصؿ القاد بالتفصيؿ( <legeng> <li> <link /> <map> <menu> <meta /> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param /> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style>

77 نص سفمي نص عموي جدوؿ جسد الجدوؿ خمية بيانات جدوؿ عنصر إدخاؿ نص متعدد األسطر ذيؿ الجدوؿ خمية عنواف أرس الجدوؿ أرس الجدوؿ عنواف المستند سطر الجدوؿ نص teletype نص تحتو خط قائمة غير مرتبة جزء متغير مف النص نص بتنسيؽ مسبؽ الجدول : 4 دليل وسوم HTML <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var> <xmp>

78 XHTML HTML extensible HTML إف XHTML ىي اختصار لػ و التي تعني القابمة لمتوس ع )البعض HTML يدعوىا HTML الموس عة(, و ىي ل تختمؼ عف التقميدي ة مف ناحية الوسو و ل مف HTML ناحية الواصفات, و لكف يمكف اعتبارىا ببساطة معايير أكثر ص ارمة لكتابة مستندات XML و قواعد لغة بشكؿ يتوافؽ Language(,)eXtensible Markup و ىذا ما يعطي XHTML صفحاتنا توافقي ة أكبر مع مستعرضات الويب, كما يدؿ ا للت از بمعايير عمى احت ارفية أكبر في العمؿ, و بالطبع ل أريد لتفكيرنا -كمطو ري ويب- أف يبقى محصو ار في مستعرض الويب الخاص بالحاسوب, فمنف كر في مستعرضات الويب الخاصة باليواتؼ الذكي ة أو باألجيزة الصغيرة لنسأؿ األخرى و أنفسنا: ىؿ ستبدو صفحاتنا كما نريد عمى كؿ مستعرضات الويب, ىذا ما تحاوؿ XHTML اإلجابة عنو. ففي حيف أف شبكة ا لنترنت تحوي مميا ارت صفحات الويب فث م ة مكتوبة بشكؿ رديء - لألسؼ - يشبو مايمي عمى سبيؿ المثاؿ: نسبة كبيرة مف ىذه الصفحات <html> <head> <title> سد ٠ ئخ HTML < title />طفحخ <BODY> <h1>bad HTML <p>this is a paragraph </body> مع أف الشيفرة أعاله ستعمؿ عمى بعض باعتقادي لف إ ل أنيا المستعرضات فرصة أدنى تؤ مف عمؿ لمف قا بكتابتيا ألنيا ل تعكس أدنى معرفو بكتابة HTML و أفضؿ ما يمكف أف يقاؿ عنيا أنيا مكتوبة بشكؿ رديء, و قد ظيرت XHTML لمحد مف انتشار صفحات كالصفحة أعاله.

79 قواعد XHTML تتمخص في مجموعة مف القواعد البسيطة التي ما إف يت تطبيقيا حيف كتابة أي مستند XHTML فسي عد المستند مستند أستطيع تمخيص قواعد XHTML مجموعة في,XHTML و HTML النصائح التالية :.Lower Case ل تنس وس اإلغالؽ. اكتب وسو و واصفات صفحتؾ بأحرؼ صغيرة ارع أف يكوف ترتيب وسو اإلغالؽ متناظ ار مع وسو الفتح. ضع القي الم سن دة لمواصفات بيف عالمات اقتباس..<head> ل تستغف عف أي مف وسو <body> و و <html> ضع تعريؼ نوع المستند DOCTYPE في بداية صفحتؾ )سيعرض في الفقرة التالية(. تعريف نوع المستند <!DOCTYPE> تنص معايير عمى أف كؿ صفحات الويب يجب أف تحوي في أوؿ سطر منيا عمى XHTML Document Type سطر التعريؼ <!DOCTYPE> و الذي يعني تعريؼ نوع المستند أو اختصا ار, و ذلؾ أف مستعرضات الويب تستخد ىذا السطر كمرجعي ة DTD Definition xmlns و ألنواع الكتابة لصيغة قواعدي ة الوسو في الصفحة, إضافة إلى استخداميا الواصفة الخاصة بوس البداية و التي تصؼ فضاء أسماء Name Space الصفحة. <html> تعرض الشيفرة التالية عنصر تعريؼ نوع المستند الذي تصادفو في أغمب صفحات XHTML و الذي يجب أف تكتبو كأوؿ سطر مف صفحتؾ إضافة لمواصفة,xmlns و بيذا يصبح الشكؿ العا لمستند XHTML كمايمي: إف أغمب ما سيت ذكره مف القواعد كاف قد مر معنا في الصفحات السابقة عمى شكؿ ممحوظات.

80 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" سأط ا ظفحخ ب< head > < head /> حز جسذ ا ظفحخ ب< body > < body /> حز </html> Transitional يعتبر النوع <!DOCTYPE> المعروض أعاله أحد أنواع المستند و يسم ى النوع و الفقرة التالية تناقش ا لختالؼ بينو و بيف األنواع األخرى. ممحوظة: <!DOCTYPE> ليس وسما مف وسو المغة و إن ما ىو سطر تعريؼ المستند. األنواع المختمفة لممستند لممستند مختمفة أنواع أربعة ىناؾ و ىذه األنواع ىي: في XHTML :XHTML 1.0 Strict. <basefont> <applet> يحوي ىذا النوع جميع وسو HTML الوسو عدا و و و و و و و <menu> و <isindex> <iframe> <font> <dir> <center> و و و <u>, و ل يسمح ىذا النوع باستخدا إطا ارت <strike> <s> <noframes> و سطر تعريؼ المستند مف ىذا النوع ىو:,<frameset> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " :XHTML 1.0 Tansitional. يحوي ىذا النوع جميع وسو HTML و لكن و ل يسمح كسابقو باستخدا إطا ارت,<frameset> و سطر تعريؼ المستند مف ىذا النوع ىو:

81 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> :XHTML 1.0 Frameset. يحوي جميع وسو HTML النوع ىو: و يسمح باستخدا اإلطا ارت, و سطر تعريؼ المستند مف ىذا <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " :XHTML 1.1. يماثؿ النوع و لكن و يتيح لؾ إضافات وحدات برمجي ة خاصة )وحدات Ruby مثال ( Strict عمى عكس المذكور, و سطر تعريؼ المستند مف ىذا النوع ىو: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " التحقق من صحة صفحات XHTML الحديث عف ننيي بالتذكير أنو بإمكاف مطو ر الويب )و غيره( مف مطابقة أف يتحقؽ XHTML صفحة ويب ما لمعايير XHTML عبر ال اربط: ممحوظة: يعكس وضع اربط التحقؽ مف مطابقة الصفحة لمعايير XHTML في صفحتؾ نوعا مف الثقة بقد ارتؾ البرمجية باعتقادي.

82 HTML5 ظيرت لغة HTML التي شرحناىا في الصفحات السابقة )المعروفة في األوساط التقنية باإلصدار, و في الحقيقة فإف تطو ارت كثيرة حصمت عمى الويب منذ مفيو )HTML 4.01 في عا ذلؾ الحيف إلى يومنا ىذا, و أصبحنا نسمع بما يعرؼ بالػ,Web 2.0 كما أصبح مف النادر أف نجد موقع ويب )أعني المواقع الجيدة( ل يقد خدمات مثؿ تشغيؿ الفيديو و الصوت و غير ذلؾ, HTML و ىذا ما استوجب تطوير إصدار جديد مف لغة بإضافة مجموعة جديدة مف الوسو و.HTML 5 الواصفات إلى المغة القديمة ليظير اإلصدار الجديد با لس و مف المي ازت الجديدة التي جاءت بمجيء HTML 5 ظيور وسو خاصة لعرض الفيديو و الصوت و وسو خاصة لكتابة المقا لت أو األخبار و وسو خاصة لمرس إضافة إلى إضافة مجموعة جديدة مف عناصر اإلدخاؿ الخاصة بالنماذج و غير ذلؾ مما سيعرض في الفق ارت القادمة. مستعرضات الويب الداعمة ل HTML 5 ( فإف ألف HTML 5 فترة قصيرة ظيرت منذ نسبيا )بدأ العمؿ عمى وضع معاييرىا عا معظ مستعرضات الويب القديمة ل تدعميا لألسؼ, و لكف المستعرضات الجديدة ستدعميا بكؿ فػ تأكيد, HTML 5 -ب أريي- ستكوف لغة بناء صفحات الويب المعيارية في المستقبؿ القريب و فقد ليذا بدأت بعض المستعرضات بدعيما فعال Google Chrome و Firefox و Opera و Internet Explorer و مثؿ اإلصدا ارت األخيرة مف مستعرضات:.Safari ل تعتقد أف دع ىذه المستعرضات كاؼ لجعؿ HTML 5 و التي تستخدميا نسبة مرتفعة مف مستخدمي ا لنترنت اإلجمالييف. المغة الرسمية لتطوير الصفحات فيناؾ عش ارت مستعرضات الويب األخرى

83 عنصر الفيديو Video تقد HTML 5 آلية بسيطة لعرض ممفات الفيديو ضمف صفحة الويب باستخدا العنصر الجديد width height و يت ذلؾ بإسناد القي المناسبة إلى واصفتي ا لرتفاع,<video> و العرض الخاصة بو و مف ث تمرير مسار ممؼ الفيديو عبر العنصر ا لبف <source> كقيمة لواصفتو و تمرير نوع ممؼ الفيديو عبر الواصفة,type لنشاىد الشيفرة التالية عمى سبيؿ المثاؿ: src <html> <head> <title> ثبي ػ ػ ظش ػشع ا ف ١ ذ ٠ </title> </head> <body> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> نألصف, انمضرعرض انحاني ال يذعم عىصر عرض انفيذيى! </video> </body> </html> يظير المحتوى النصي )الموجود بيف وسمي البداية و النياية )<video> في لمعنصر المستعرضات التي ل تدع,HTML 5 أم ا في المستعرضات الداعمة ليا فستبدو صفحتنا كمايمي:

84 الشكل 31: عنصر عرض الفيديو الجديد كما يبدو في مستعرض جوجل كروم <video> ممحوظة: إلى ىذه المحظة فإف العنصر يدع تشغيؿ ثالثة أنواع مف صيغ الفيديو و ىي الصيغ.WebM و Ogg و MPEG4 يعرض الجدوؿ التالي واصفات العنصر :<video> الواصفة audio autoplay controls height loop poster src width القيم الممكنة muted autoplay controls قيمة بالبكسؿ loop اربط تشعبي اربط تشعبي قيمة بالبكسؿ الشرح كت الصوت التشغيؿ التمقائي لممؼ الفيديو عرض شريط األدوات في مشغؿ الفيديو ارتفاع مشغؿ الفيديو إعادة تشغيؿ الفيديو بشكؿ تمقائي عند انتيائو اربط تشعبي لصورة تعبر عف مقطع الفيديو و تظير قبؿ أف يقو المستخد بتشغيمو اربط ممؼ الفيديو عرض مشغؿ الفيديو الجدول : 5 واصفات العنصر <video>

85 عنصر الصوت Audio تتيح HTML 5 عرض ممفات الصوت ضمف صفحة الويب ببساطة شديدة مف خالؿ العنصر <audio> و الذي يستخد بطريقة مشابية لعنصر عرض الفيديو كمايمي: <html> <head> ػ ػ ظش ػشع ا ظ د< title > < title /> ثبي </head> <body> <audio controls="controls"> <source src="song.mp3" type="audio/mp3" /> نألصف, انمضرعرض انحاني ال يذعم عىصر عرض انصىخ! </audio> </body> </html> يبدو ىذا المثاؿ في المستعرضات التي تدع ىذا العنصر كمايمي: الشكل : 32 عنصر عرض الصوت الجديد كما يبدو في مستعرض جوجل كروم

86 أم ا في المستعرضات التي ل تدع ىذا العنصر فسيظير النص المذكور بيف وسمي البداية و النياية لمعنصر <audio> و الذي يحوي رسالة ا لعتذار. ممحوظة: إلى ىذه المحظة فإف العنصر <audio> يدع تشغيؿ ثالث صيغ لممفات الصوت ىي MP3 و و Ogg.Wav يعرض الجدوؿ التالي واصفات العنصر :<audio> الواصفة autoplay controls loop preload src عناصر النماذج القيم الممكنة autoplay controls loop preload اربط تشعبي Forms الشرح التشغيؿ التمقائي لممؼ الصوت عرض شريط األدوات في مشغؿ الصوت إعادة تشغيؿ ممؼ الصوت بشكؿ تمقائي عند انتيائو تحميؿ الممؼ الصوت عند تحميؿ الصفحة بغض النظر عف خاصية التشغيؿ التقائي و عف نقر المستخد لزر التشغيؿ اربط ممؼ الصوت الجدول : 6 واصفات العنصر <video> Forms تقد HTML 5 مجموعة جديدة مف عناصر اإلدخاؿ الخاصة بالنماذج باإلضافة إلى اإلدخاؿ عنصر أنواع مف جديدة مجموعة التقميدي,<input> و سنبدأ حديثنا بالحديث عف األنواع الجديدة لمعنصر <input> و التي يعرضيا الجدوؿ التالي: قيمة الواصفة type url number الشرح عنصر خاص إلدخاؿ البريد اإللكتروني عنصر خاص إلدخاؿ الروابط التشعبية عنصر خاص إلدخاؿ األرقا

87 عنصر خاص إلدخاؿ قيمة محصورة بمجاؿ معي ف سمفا, و يظير ىذا العنصر عمى شكؿ شريط تمرير عنصر إلدخاؿ التاريخ )يو/شير/سنة( عنصر إلدخاؿ التاريخ )شير/سنة( عنصر إلدخاؿ التاريخ و يستخد لتحديد أسبوع مف السنة عنصر إلدخاؿ الوقت )ساعة/دقيقة( عنصر إلدخاؿ التاريخ و الوقت )الساعة/اليو/الشير/السنة(, بالتوقيت العالمي عنصر إلدخاؿ التاريخ و الوقت, بالتوقيت المحمي عنصر لعرض مربع البحث و ىو شبيو بالنوع text عنصر إلدخاؿ القي الموني ة الجدول : 7 أنواع عناصر اإلدخال الجديدة في HTML 5 range date month week time datetime datetime-local search color لنشاىد المثاؿ التالي: <!DOCTYPE HTML> <html> <body> <form action="" method="get"> Name: <input type="text" name="stdnt_name" /><br /> <input type=" " name="stdnt_ " /><br /> Website: <input type="url" name="stdnt_url" /><br /> Points:

88 <input type="range" name="points" min="1" max="10" /><br /> </html> </body> </form> Date: <input type="date" name="user_date" /><br /> <input type="submit" /> المثاؿ السابؽ يبدو كمايمي في مستعرض الويب: الشكل 33: عناصر اإلدخال الجديدة كما تبدو في مستعرض كروم باإلضافة لما سبؽ ذكره HTML5 تقد مجموعة مف وسو النماذج الجديدة منيا الوس و و الذي يستخد إلنشاء القوائ المنسدلة كخيا ارت إدخاؿ افت ارضي ة ألحد عناصر <datalist> <option> اإلدخاؿ الموجودة و ي نشأ محتوى القائمة بالتعاوف مع وس و بطريقة مشابية لمعنصر )<datalist> لعنصر القدي,<select> كما يت تمرير اس قائمة الخيا ارت ا لفت ارضية )عنصر اإلدخاؿ عبر الواصفة الجديدة,list لنشاىد المثاؿ التالي:

89 <!DOCTYPE HTML> <html> <body> <form action="" method="get"> name: <input type="text" list="names_list" name="stdnt_name" /><br /> </html> </body> </form> <datalist id="names_list"> <option label="a" value="namea" /> <option label="b" value="nameb" /> <option label="c" value="namec" /> </datalist> مف العناصر الجديدة التي قدمتيا أيضا العنصر اف و,<output> حيث <keygen> HTML5 يستخد العنصر <keygen> في عمميات تسجيؿ الدخوؿ و التحقؽ مف المستخدميف و ذلؾ عبر توليد زوج مفاتيح )مفتاح عمومي/مفتاح خصوصي( يرسؿ مع Authentication الطمب دوف تدخؿ المستخد, و يستخد بالشكؿ: <keygen name="security" /> أما العنصر فيستخد لعرض مخرجات Outputs مف أنواع مختمفة مثؿ نتائج <output> الحسابات أو القي الم عاد ة مف أحد توابع Java Script كمايمي: <output id="result" onforminput="rescalc()"></output>

90 عنصر الم رس م Canvas تقد عنصر المرس <Canvas> و الذي يتيح لؾ الرس ضمف صفحة الويب باستخدا HTML 5 و بذلؾ تستغني عف أية إضافات خارجية كإضافات الػ Flash عمى Plugins Java Script سبيؿ المثاؿ. لستخدا عنصر المرس يت إنشاؤه أو ل بارتفاع و عرض width محدديف كمايمي: height <canvas id="mycanvas" width="200" height="100"></canvas> ث يت الرس عميو باستخدا Java Script بشكؿ مشابو لمايمي: <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> حيث قمنا أو ل بتحديد عنصر المرس عف طريؽ الػ id الخاص بو و ذلؾ في السطر: var c=document.getelementbyid("mycanvas"); قمنا بإنشاء كائف ث مف المرس و ىيأناه لمرس ثنائي األبعاد 2D في السطر التالي: Object var cxt=c.getcontext("2d"); اآلف و لمقيا بالرس سيت استدعاء طرؽ الكائف الذي ت إنشاؤه قبؿ قميؿ بالشكؿ: cxt Methods cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); يمكنؾ ق ارءة المزيد عف Java Script في مرجع آخر فيي خارج نطاؽ ىذا الكتاب و لكنني سأحاوؿ شرح استخداميا في األمثمة.

91 ففي السطر األوؿ ت تحديد الموف األحمر لونا لمشكؿ الذي سيت رسمو )ىذا ما تعنيو القيمة )#FF0000, ث ت رس المربع بتمرير إحداثيات ركنيو األيسر العموي و األيمف السفمي بشكؿ مشابو لما فعمناه عند تحديد مناطؽ الخريطة الصورية )انظر فقرة الخ ارئط الصورية(. يبدو المثاؿ السابؽ ضمف الشيفرة الكاممة لصفحة الويب كمايمي: <!DOCTYPE HTML> <html> <body> <canvas id="mycanvas" width="200" height="100"> ال يذعم مضرعرضك عىصر انمرصم </canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> </body> </html> يعرض الجدوؿ التالي بعض طرؽ Methods كائف المرس و وظيفة كؿ منيا: سيت في الفصؿ الثاني عرض مفيو األلواف في.HTML

92 الطريقة fillstyle fillrect moveto createlineargradient addcolorstop drawimage lineto مثال الوظيفة cxt.fillstyle="#ff0000"; تحديد لوف التعبئة cxt.fillrect(0,0,150,75); رس مستطيؿ cxt.moveto(10,10); مبدأ إ ازحة اإلحداثيات cxt. إنشاء تدرج لوني createlineargradient(0,0,170,50).addcolorstop(0,"#ff0000"); cxt إلى لوف إضافة التدرج الموف cxt.drawimage(img,0,0); لرس صورة cxt.lineto(150,50); لرس خط مستقي الجدول : 8 بعض طرق كائن العنصر <canvas> تخزين البيانات من طرف العميل تتيح كائنيف مختمفتيف لتخزيف البيانات مف طرؼ العميؿ Client و ىما: HTML 5 الكائف ىذا الكائف :localstorage يستخد لتخزيف البيانات مف طرؼ العميؿ لفترة غير. محدودة و يستخد الصيغة العامة التالية لمتخزيف: localstorage.varname="value"; حيث أف ىو اس المتغير و value ىي قيمة ىذا المتغير و يمكف استرجاع varname قيمة المتغير بالصيغة العامة التالية: localstorage.varname; الكائف :sessionstorage يستخد ىذا الكائف لتخزيف البيانات مف طرؼ العميؿ لفترة. محددة بجمسة واحدة فقط, و يستخد الصيغة العامة التالية لمتخزيف:

93 sessionstorage.varname="value"; value حيث أف varname ىو اس المتغير و ىي قيمة ىذا المتغير و يمكف استرجاع قيمة المتغير بالصيغة العامة التالية: sessionstorage.varname; ممحوظة: ىذاف الكائناف يستخدماف كمخازف خاصة لمبيانات أثناء كتابة شيف ارت.Java Script دليل الوسوم الجديدة في HTML 5 :HTML 5 ختاما ليذا الفصؿ نعرض فيمايمي جدو ل بالوسو الجديدة في الوسم <article> <aside> <audio> <canvas> <command> <datalist> <details> <embed> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <mark> الشرح مقالة جانب مف محتويات الموقع لتشغيؿ ممفات الصوت لمرس برمجيا زر أوامر قائمة خيا ارت افت ارضية لعنصر إدخاؿ تفاصيؿ عنصر ما تضميف عنصر تفاعمي أو plugin خارجي عنواف عنصر <figure> مجموعة مف عناصر الوسائط ذيؿ منطقة مف مناطؽ الصفحة أرس منطقة مف مناطؽ الصفحة معمومات عف قس مف المستند توليد مفاتيح التحقؽ في النموذج نص مميز

94 قياسات محصورة بمدى محدد مسبقا روابط تشعبية عرض خرج مف نوع ما شريط تقد لميمة مف نوع ما يستخد لغة Ruby لمتصريح عف ما سيت عرضو في حالة كوف المستعرض ل يدع عنصر Ruby شرح لما ت التصريح عنو باستخدا عنصر Ruby عنصر Ruby قس مف المستند لتعريؼ مصادر الوسائط يعرؼ ترويسة العنصر detail التاريخ/الوقت لعرض عناصر الفيديو سطر جديد محتمؿ الجدول : 9 دليل الوسوم الجديدة في HTML 5 <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <summary> <time> <video> <wbr>

95 الفصؿ الثاني CSS 3

96

97 مقدمة تعم منا في الفصؿ الماضي كيفي ة كتابة مستندات الويب باستخدا لغة HTML5 و لكننا ل نتطر ؽ لنواحي كثيرة تتعمؽ بمظير و تنسيؽ تمؾ المستندات, و في الحقيقة فقد كاف ىذا األمر مقصودا ألف ما يتعمؽ بالشكؿ و المظير ىو مف ميم ة أو ارؽ األنماط ا لنسيابي ة CSS التي يناقش ىذا الفصؿ أحدث إصدا ارتيا و الذي يعرؼ بػ لكننا -في واقع األمر- نستطيع أف ل,CSS3 و نتحد ث مباشرة عف لذلؾ سنتحدث قبؿ ذلؾ عف CSS التقميدية. CSS3 CSS ما هي CSS إف عمى أنيا ىي اختصار "أو ارؽ األنماط ا لنسيابي ة", لألحرؼ األولى مف الجممة ففي حيف أف Cascading Style Sheet HTML و التي ت رج م ت تيت بوصؼ عناصر مستندات الويب تيت بوصؼ فإف مظير شكؿ و ىذه العناصر, و قد كاف ظيور أو ارؽ األنماط ا لنسيابية CSS الماحؽ الرئيسي لمشكمة مف أكبر المشاكؿ التي واجيت مطو ري الويب لسنوات قبؿ ظيورىا, و الفقرة التالية تعرض ىذه المشكمة. مشكمة مطوري الويب قبل CSS عندما ت تصمي لغة كاف التركيز األكبر عمى تصمي لغة تصؼ عناصر صفحات الويب HTML فقط, و ل يكف ىناؾ أي توجو لدى مصممي أف تيت لغتي بمظير و شكؿ المحتوى HTML ت ت ر ك و المقد, ىذه الميمة لمصممي مستعرضات الويب, حيث كاف -و ما ي ازؿ- كؿ مستعرض مف مستعرضات الويب يعرض كؿ عنصر مف عناصر صفحة الويب بمظير افت ارضي خاص بو حسبما أرى مصممو المستعرض و بغض النظر عف رغبة مصم الصفحة. ىذه الترجمة ىي الغالبة عمى الم ارجع العربية.

98 ت التنبو ليذه النقطة لحقا فأضيفت وسو جديدة تيت بالتنسيؽ و مف أمثمتيا الوس <font> الذي يستخد لعرض نص بنوع خط )بنط( Font و حج و لوف محدد ضمف الصفحة, ىذا و كاف شيئا جميال في أوؿ األمر لكنو سرعاف ما تحوؿ لكارثة بالنسبة لمطوري الويب, فقد كاف ىناؾ بعض المواقع التي يصؿ عدد صفحاتيا إلى مئات أو آ لؼ الصفحات أحيانا, مما يعني أف عممية تنسيؽ ىذه الصفحات تحتاج لوقت و جيد كبيريف, ناىيؾ عف الحاجة إلى التركيز الشديد في ضبط خصائص الوسو المذكورة سابقا لمحصوؿ عمى صفحات بألواف و أحجا و أنواع خطوط موحدة و.CSS متجانسة, لكف و مف حسف الحظ فقد تالشت ىذه المشكمة مع ظيور مبدأي ا يمكننا القوؿ أف تصؼ مظير و شكؿ كؿ وس مف وسو HTML عمى حد ى, و ىذا CSS ما يعني بالنسبة لمطور الويب أنو سيقو بكتابة وصؼ لشكؿ و مظير الوس في مكاف واحد لمرة و.CSS واحدة فقط, ث سي ط ب ؽ ىذا التنسيؽ عمى جميع مستندات الويب المرتبطة بذات الػ البدء في استخدام CSS ىناؾ ثالث طرؽ لستخدا أو ارؽ األنماط ا لنسيابية CSS في صفحتؾ: :Inline CSS السطري ة CSS. يت إسناد شيفرة إلى الواصفة style الخاصة بكؿ عنصر عمى حد ى, انظر المثاؿ CSS التالي: p> ا فمشح<"; style="color:red < p /> حز.CSS و ىذه الطريقة غير مفضمة -بالنسبة لي- ألنيا تعيدنا لمشاكؿ ما قبؿ الداخمي ة :Embeded CSS CSS )الدفينة(. مع عد اقتناعي بترجمة font لممعموماتية و سأسمح لنفسي باستخدا "خط" كترجمة لػ إلى "بنط" لكنيا وردت ىكذا في معج مصطمحات المعموماتية الصادر عف الجمعية العممية السورية font في كتابي ىذا.

99 <style> Head يت كتابة شيفرة CSS في منطقة الػ مف الصفحة بيف وسمي و </style> لتصبح الصفحة بالشكؿ: <html> <head> <style type="text/css"> هىا يرم كراتح شيفراخ CSS </style> </head> <body> حز ا ظفحخ ب </body> </html> و تعتبر ىذه الطريقة جيدة لممواقع ذات العدد المحدود مف الصفحات أما لممواقع بالنسبة المتوسطة و الكبيرة فأفضؿ استخدا الطريقة الثالثة. :External CSS الخارجي ة CSS. شيفرة كامؿ يت كتابة في ممؼ مستقؿ يحمؿ ا لمتداد.css أو ل, ث يت ربط ىذا CSS الممؼ مع صفحة الويب باستخدا الوس <link> في منطقة أرس الصفحة عبر تمرير مسار الممؼ إلى واصفتو و تحديد نوع العالقة بػ stylesheet كمايمي: href <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

100 ا ظفحخ ب< body > < body /> حز </html> و ىذه الطريقة ىي الطريقة المثالية لستخدا CSS ب أريي. شيف ارت CSS تتكوف شيفرة CSS مف مجموعة مف القواعد,Rules تصؼ كؿ قاعدة منيا مظير عنصر أو مجموعة مف العناصر في الصفحة, و الشكؿ العا لقاعدة CSS ىو: selector { property:value; property:value; property:value; } } و ىذا ما يقو بتطبيؽ جميع خصائص المظير المذكورة { بيف القوسيف عمى كافة و عناصر.selector التي تطابؽ الصفحة الم ح د د ممحوظة: كما يبدو مف اسميا فالمحددات تستخد لتحديد عنصر أو مجموعة عناصر مف صفحة الويب بغية تطبيؽ عمييا, و CSS قواعد الم ح د دات كثيرة و متنو عة في CSS الم حد د في أبسط حا لتو اسما ألحد وسو فقد يكوف الم حد د id لعنصر ما مثؿ #link1 أو #header1 أو #searchform HTML مثؿ h1 أو a أو, p و قد يكوف المح ددات بشكؿ ضمني في الفق ارت التالية كما سيت عرض و قد يكوف غير ذلؾ, و بالطبع سيت شرح مجموعة مف جدوؿ بكافة المحددات مع معانييا في نياية الفصؿ. يت ذكر كؿ خاصية مف خصائص زوج بشكؿ CSS اس/قيمة بالشكؿ: property:value;

101 حيث أف ىي اس خاصية المظير و value ىي قيمة الخاصية, و ينتيي تعريؼ property الخاصية بالفاصمة المنقوطة, و سنبدأ باستع ارض كافة الخصائص اعتبا ار مف الفقرة التالية. تذك رة: كػ فإف ل تعطي أي قيمة لمحارؼ الف ارغات و إنما يت استخداميا لغرض تسييؿ ق ارءة CSS HTML الشيفرة فقط. خصائص مظهر النصوص توفر CSS مجموعة مف الخصائص لتنسيؽ مظير النصوص و ىي: خاصية المحاذاة text-align و التي تستخد كمايمي: h1 {text-align:center;} right <h1> حيث أف المحدد h1 يعني جميع عناصر في المستند, و يمكف إسناد القيمة center left إلى الخاصية text-align لمحاذاة النص لميميف أو لمحاذاة النص لميسار أو.width لتوسيط النص أو justify لجعؿ جميع أسطر الفقرة العرض متساوية خاصية التزييف )التأثيث( text-decoration و التي تستخد كمايمي: p a {text-decoration:overline;} حيث أف المحدد يعني جميع عناصر الروابط <a> الموجودة ضمف أي مف عناصر p a الفق ارت و القيمة في المستند, تعني عرض خط أعمى النصوص, و يمكف overline <p> إسناد القي التالية: أو التزييف إللغاء لعرض خط أسفؿ النص أو underline none line-through النص. لشطب خاصية اتجاه الق ارءة direction و التي تستخد كمايمي: ى يعربوف Decor عمى أنيا "أثاث" و ليذا أوردت التأثيث بيف قوسيف, عمما أنني أرى أف التزييف ىي الترجمة األنسب.

102 p {direction:rtl;} لجعؿ اتجاه الق ارءة مف اليميف إلى اليسار و ىذا ما تعنيو القيمة right to ار لػ )اختصا rtl,)left و يمكف جعؿ اتجاه الق ارءة مف اليسار لميميف بإسناد القيمة ltr إلى الواصفة.direction خاصية تحويؿ حالة األحرؼ text-transformation و التي تستخد كمايمي: p {text-transformation:uppercase;} لجعؿ جميع عناصر أحرؼ بحالة الحرؼ <p> الكبير, و يمكف أف تأخذ ىذه الخاصية capitalize lowercase القي uppercase لمحروؼ الكبيرة أو لمحروؼ الصغيرة أو لجعؿ الحرؼ األوؿ فقط مف كؿ كممة حرفا كبي ار. خاصية إ ازحة البداية text-indent و التي تستخد كمايمي: p {text-indent:20px;} إل ازحة أوؿ كممة مف المقطع بمقدار المغة اإلنجميزي ة. بكسؿ, و اإل ازحة غالبا ما تستخد مع بداية فق ارت خاصية الموف color و التي تستخد كمايمي: p {color:red;} حيث أف المحدد يعني جميع العناصر الموجودة في الصفحة, و يت إسناد الموف <p> p white green red لمخاصية color إما بإسناد اس الموف بالمغة اإلنجميزية مثؿ أو أو..إلخ, أو بإسناد قيمة الموف بالنظا الست عشري مثؿ #FF0000 أو Hexadecimal ىناؾ لغات تعطي أكثر مف رس لنفس الحرؼ فمثال الحرؼ األوؿ في اإلنجميزية يرس حالة الحرؼ الصغير. A إذا كاف في حالة الحرؼ الكبير و في a

103 rgb أو #FFFFFF..إلخ, أو بإسناد قيمة الموف عبر التابع بالشكؿ #00FC00 rgb(255,255,255) أو rgb(0,255,0) أو..إلخ. rgb(255,0,0) يتشكؿ توضيح: كؿ لوف مف مزج ثالثة ألواف ىي األحمر و األخضر و األزرؽ, و تختمؼ األلواف عف بعضيا باختالؼ نسبة كؿ مف األحمر/األخضر/األزرؽ فييا, و في حالة تمثيؿ الموف بالنظا الست عشري يت اعتبار أوؿ خانتيف تمثالف درجة الموف األحمر, و يت اعتبار ثاني خانتيف تمثالف درجة الموف األخضر, و يت اعتبار ثالث خانتيف تمثالف درجة الموف األزرؽ, و بالطبع تتدرج قي كؿ خانة بيف 00 كأدنى قيمة و FF كأعمى قيمة, فعمى سبيؿ المثاؿ لمحصوؿ عمى الموف البنفسجي يجب مزج المونيف #FF00FF األزرؽ و األحمر دوف أي نسبة مف الموف األخضر و بيذا تصبح قيمة الموف البنفسجي و يمكف التحك بتدرج الموف عبر تخفيؼ درجة األحمر و األزرؽ لتصبحا عمى سبيؿ المثاؿ #8B008B و ىكذا, أما في حالة تمثيؿ الموف rgb عبر التابع فتمثؿ الخانة األولى الموف األحمر, و تمثؿ الثانية الموف األخضر, و تمثؿ الثالثة الموف األزرؽ لكف قيمة كؿ خانة تتدرج بيف 0 كحد أدنى و 255 كحد أقصى. لنشاىد المثاؿ التالي و الذي يعرض استخدا خصائص مظير النصوص: <html> <head> <title> طفحخ اخزجبس خظبئض ظ ش ا ظ ص </title> <style type="text/css"> p { text-align:justify; color:#ff0000; text-decoration:underline; direction:rtl; }

104 </style> </head> <body> <p> إ ز ا ظفحخ ػجبسح ػ طفحخ اخزجبس خظبئض ظ شا ض ف أ ساق األ بؽ اال س ١ بث ١ خ لذ رؼ ذ ب إؿب خ ا ض ا ج د ث ١ س ثذا ٠ خ ب ٠ خ ز ا فمشح ١ ظ ش ػ خبط ١ خ ا حبراح ف مخ ا شبشخ ا ز س ف ؼشػ ب ز ا ظفحخ. </p> </body> </html> و الذي يبدو في مستعرض الويب كمايمي: الشكل : 34 استخدام خصائص مظهر النصوص

105 خصائص الخطوط Fonts توفر مجموعة مف الخصائص لمتحك بالخطوط,Fonts و يت التعامؿ مع الخطوط في CSS CSS عمى شكؿ مجموعات تدعى كؿ منيا بػ"عائمة خطوط" يتي أو أسماء أكثر مف خط مفصولة بف واصؿ comma,font-family حيث يت إسناد الخاصية إلى font-family خط و يكوف الخط األوؿ ىو الخط ا لفت ارضي, و في الحالة التي يتعذر عمى المستعرض فييا العثور عمى الخط ا لفت ارضي فإنو يجعؿ الخط التالي ىو ا لفت ارضي و ىكذا. توفر ثالثة عوائؿ افت ارضية مف الخطوط ىي العائمة و العائمة Sans-serif و Serif CSS العائمة و ينصح باستعماؿ العائمة الثانية لمغة اإلنجميزية و العائمة الثالثة عند عرض Monospace الشيف ارت الحاسوبية مثؿ شيف ارت لغات البرمجة في صفحة الويب. كما توفر مجموعة أخرى مف الخصائص لمتحك بالخطوط ىي الخاصية font-style و CSS التي يمكف أف تسند إلييا القي )الخط المائؿ( و normal )الخط العادي(, و الخاصية italic = em em و التي تستخد لتحديد حج النص بالبكسؿ أو بالواحدة )كؿ font-size بكسؿ(, لنشاىد المثاؿ التالي: <html> <head> <title> طفحخ اخزجبس خظبئض ا خ ؽ </title> <style type="text/css"> اجترحت مصطمح الخط اليتي لمحالة التي تكوف فييا عائمة الخطوط مكونة مف خط واحد.

106 p { font-family:"tahoma","simplified Arabic",sans-serif; font-size:1.5em; font-style:italic; direction:rtl; } </style> </head> <body> <p> إ ز ا ظفحخ ػجبسح ػ طفحخ اخزجبس خظبئض ا خ ؽ ف أ ساق األ بؽ اال س ١ بث ١ خ. </p> </body> </html> و التي تبدو كمايمي في مستعرض الويب: الشكل : 35 استخدام خصائص الخطوط

107 sans-serif ممحوظة: ل نضع عالمتي اقتباس حوؿ القيمة نقصد عائمة ألننا الخطوط ا لفت ارضية و التي تحمؿ اس.sans-serif خصائص مظهر الروابط في الحقيقة ل توجد خصائص خاصة لمظير الروابط, و لكف توجد محددات خاصة لمروابط تستخد لتنسيؽ مظير ال اربط في حا لتو المختمفة, و المحددات ىي: و الذي يستخد لتنسيؽ مظير ال اربط في حالتو العادية و ىو مكافئ لممحدد a إذا a:link است خد وحده. a:visited و الذي يستخد لتنسيؽ مظير ال اربط الذي ت النقر عميو مسبقا. a:hove و الذي يستخد لتنسيؽ مظير ال اربط عندما مرور مؤش ر الفأرة عميو. a:active و الذي يستخد لتنسيؽ مظير ال اربط لحظة النقر عميو. و المثاؿ التالي يعرض استخدا ىذه المحددات الخاصة: <html> <head> <title> طفحخ اخزجبس خظبئض ظ ش ا ش اثؾ </title> <style type="text/css"> a:link{text-decoration:none;color:blue;} a:visited{color:green;} a:hover{text-decoration:underline;} a:active{font-size:120%;} </style>

108 </head> <body> <a href="#">normal link</a> <br/> <a href=" link</a> <br/> <a href="#">hover link</a> <br/> <a href="#">normal link 2</a> <br/> </body> </html> يبدو المثاؿ السابؽ في صفحة الويب بعد زيارة بعض الروابط: الشكل : 36 هكذا تبدو صفحة اختبار مظهر الروابط لحظة النقر عمى ال اربط الثالث و بعد زيارة الثاني ممحوظة: يجب ذكر قاعدة a:hover بعد a:link و,a:visited كما يجب ذكر a:active بعد.a:hover خصائص الخمفيات Backgrounds توفر CSS مجموعة مف الخصائص لتنسيؽ خمفيات العناصر, نبدأ استع ارضيا بالحديث عف الخاصية background-color و التي تستخد لتحديد خمفية لوني ة ألحد العناصر بإسناد قيمة الموف إلييا بالشكؿ:

109 background-color:#cf1a11; و يمكف تعييف صورة كخمفية ألحد العناصر عبر إسناد مسار الصورة لمخاصية بالشكؿ: backgroundimage background-image:url( image.jpg ); و في حاؿ كوف حج الصورة )الخمفي ة( أصغر مف حج العنصر يت تحديد طريقة تك ارر الصورة repeat-x عبر الخاصة background-repeat فيت إسناد القيمة لتك ارر الصورة بشكؿ أفقي أو repeat القيمة repeat-y لتك ارر الصورة بشكؿ عمودي أو لتك اررىا بشكؿ أفقي و عمودي معا أو no-repeat لعد التك ارر و ىذا في الحالة األولى, أما في الحالة الثانية فيمكف عد تك ارر الصورة و تحديد موضعيا background-position عف طريؽ الخاصية حيث يت إسناد واحدة أو أكثر center center center top left bottom left center مف القي left top أو أو أو أو أو right center أو right top أو أو,right bottom لنشاىد المثاؿ التالي و center bottom الذي سنعرض فيو عنصريف <p> األوؿ بخمفية لونية و اآلخر بخمفية صورية: <html> <head> <title> طفحخ اخزجبس خظبئض ا خ ف ١ خ </title> <style type="text/css">.firstp { background-color:black; color:white; }.secondp {

110 background-image:url( image1.jpg ); background-repeat:no-repeat; background-position:center center; } p {direction:rtl;} </style> </head> <body> <p class="firstp"> ا ؼ ظش األ ي س ١ جذ ثخ ف ١ خ س داء ض أث ١ غ </p> <p class="secondp"> <br/><br/> ا ؼ ظش ا ثب س ١ جذ ثخ ف ١ خ ط س ٠ خ زا <br/> سأل ثب ض ي ثؼؼخ أسش ثغ ١ خ ح زا ا ؼ ظش <br/> ا سبحخ ا ىبف ١ خ ؼشع ا ظ سح ا خ ف ١ خ </p> </body> </html> ممحوظة: ىناؾ طريقة خاصة لتحديد العناصر تعرؼ باس التحديد بالفئات classes حيث يت استبداؿ المحدد بأي اس مسبوقا بنقطة و ىذا ما يعرؼ بتعريؼ الفئة class في,CSS بعد ذلؾ يت إسناد اس ىذه الفئة )دوف نقطة( إلى الواصفة class لمعناصر التي نرغب بجعؿ مظيرىا مطابقا لمخصائص المذكورة في قاعدة الفئة. يبدو المثاؿ السابؽ في مستعرض الويب كمايمي:

111 الشكل : 37 هكذا تبدو صفحة اختبار خصائص الخمفية خصائص مظهر القوائم يت تخصيص مظير القوائ في عبر تخصيص نوع الرمز/الرق المعروض أما كؿ عنصر CSS مف عناصر القائمة, و يت ىذا مف خالؿ الخاصيتيف التاليتيف: :list-style-type و التي تستخد لتحديد نوع الرمز/الترقي أما كؿ عنصر مف عناصر القائمة, و تأخذ القي none في حالة و و و disc square circle lower- lower-roman القائمة غير المرتبة, upper-roman و القي و و و و و decimal و و upper-latin lower-latin upper-alpha alpha غيرىا في حالة القائمة المرتبة. :list-style-image و التي تستخد لوضع صورة خاصة أما كؿ عنصر مف عناصر القائمة كرمز لو, و تستخد بالشكؿ: list-style-image:url('image.gif');

112 لنشاىد المثاؿ التالي: <html> <head> <title> طفحخ اخزجبس خظبئض ظ ش ا م ائ </title> <style type="text/css"> ul {list-style-type:square;} ol {list-style-image:url('dot.gif');} </style> </head> <body> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> </body> </html>

113 يبدو ىذا المثاؿ في مستعرض الويب كمايمي: خصائص مظهر الجداول الشكل : 38 هكذا تبدو صفحة اختبار خصائص مظهر القوائم في مستعرض الويب CSS أظف أف الجداوؿ ىي أكثر عناصر HTML تستفيد مف التي إذا عرؼ مطور الويب كيفية توظيؼ CSS خصائص التي ع ر ض ت سابقا بالشكؿ المناسب, لنشاىد المثاؿ التالي أو ل : <html> <head> <style type="text/css"> table { font-family:"trebuchet MS", sans-serif; width:100%; border-collapse:collapse;

114 direction:rtl; text-align:center; } td, th { font-size:1em; border:1px solid #98bf21; } th { font-size:1.1em; background-color:#a7c942; color:#ffffff; }.alt td { color:#000000; background-color:#eaf2d3; } </style> </head> <body> <table> <tr> < th />الشركة< th >

115 < th />العنواف< th > < th />البمد< th > </tr> <tr> <td> الوىمية < td />الشركة < td />دمشؽ< td > < td />سوريا< td > </tr> <tr class="alt"> <td> الوىمية < td />الشركة < td />بغداد< td > ارؽ< td > < td />الع </tr> <tr> إ آخش ش ١ فشح ا جذ ي </table> </body> </html> يبدو ىذا المثاؿ في مستعرض الويب كمايمي:

116 الشكل : 39 توظيف CSS لتنسيق مظهر الجداول و ما يجب ذكره CSS مف خصائص عند الحديث عف المثاؿ السابؽ ىو مايمي: :border و التي يسند إلييا قيمة بالبكسؿ تعبر عف سماكة حدود الجدوؿ و لوف يعبر عف,dashed لوف الحدود باإلضافة إلى تحديد نوع الحدود )خط متصؿ,solid خط متقطع منقط dotted.. إلخ(, و بالطبع يفصؿ محرؼ المسافة بيف ىذه القي )سيت الحديث عف ىذه الخاصية بشكؿ أكثر تفصيال في فقرة لحقة(. :border-collapse و التي تحدد ىؿ سيت طي حدود الخاليا و اعتبار وجود حد واحد بيف كؿ خميتيف )القيمة )collapse أ سيت اعتبار حد كؿ خمية مستقال عف اآلخر. ممحوظة: لتسييؿ ق ارءة محتويات الجدوؿ ينصح دائما بجعؿ أسطر الجدوؿ متناوبة ألواف الخمفية و ألواف النصوص كما فعمنا في الجدوؿ المعروض في مثالنا السابؽ, و ىذا ما حققناه عبر.alt الفئة استخدا, يعرؼ ىذا التناوب الموني باس Zebra-stripping

117 خصائص الموض عة Positioning تتيح خصائص الموض عة في CSS تحديد موض ع العنصر, و كيؼ يت عرض العنصر عندما يكوف محتواه كبي ار جدا, كما يتيح وضع عناصر خمؼ عناصر أخرى, و ىناؾ عدة أنواع لتحديد موضع العنصر في CSS في الحقيقة و ىي: النوع الستاتيكي :Static يت وضع العنصر في مكاف ظيوره في الصفحة أي بحسب ترتيب و موضع ظيور وسمو ضمف وسو الصفحة, و ىذا النوع ىو ا لفت ارضي. النوع الثابت :Fixed يت وضع العنصر طبقا إلحداثيات ثابتة يت إسنادىا بالبكسؿ لمخصائص و و و مع إسناد القيمة fixed إلى الخاصية bottom right left top,position و بالطبع يت اعتبار الركف العموي األيسر لمصفحة مرك از لإلحداثيات. النوع النسبي :Relative يت وضع العنصر طبقا إلحداثيات ثابتة يت إسنادىا بالبسكؿ لمخصائص و و و مع إسناد القيمة relative إلى الخاصية bottom right left top,position و يت اعتبار الركف العموي األيسر في حالتو لمعنصر نفسو مرك از الستاتيكية لإلحداثيات. النوع الم ط م ؽ :Absolute يت وضع العنصر طبقا إلحداثيات ثابتة يت إسنادىا بالبكسؿ لمخصائص و و و مع إسناد القيمة absolute إلى الخاصية bottom right left top,position و يت اعتبار الركف األيسر العموي ألوؿ عنصر أب بموضع غير ستاتيكي مرك از لإلحداثيات, و في حاؿ ع وجود أي عنصر أب بموضع غير ستاتيكي يت اعتبار الركف األيسر العموي لمعنصر <html> لنشاىد المثاؿ التالي: مرك از لإلحداثيات. <html> <head>

118 <style type="text/css"> * {direction:rtl;} h1 { position:absolute; left:100px; top:150px; } </style> </head> <body> ا ؼ ا ثئحذاث ١ بد مخ< h1 > < h1 /> زا ف حب خ اإلحذاث ١ بد ا مخ ٠ ز ػشع ا ؼ ظش ؿجمب <p> إلحذاث ١ بد ا شح خظبئظ ثغغ ا ظش ػ ىب س سد س ف < p />ش ١ فشح ا ظفحخ </body> </html> و الذي يبدو في مستعرض الويب كمايمي: الشكل : 41 مثال عمى استخدام خصائص موض ع ة العناصر في CSS ممحوظة: المحدد الخاص * يقو بتحديد جميع عناصر المستند.

119 يمكف وضع عناصر خمؼ عناصر أخرى عف طريؽ الخاصية z-index و ذلؾ بإسناد رق صحيح إلييا, حيث يت إظيار العنصر ذو الػ z-index المثاؿ التالي: األعمى أما العناصر األخرى, لنشاىد <html> <head> <style type="text/css"> * {direction:rtl;} img { position:absolute; left:100px; top:50px; z-index:-1; } </style> </head> <body> ا فمشح< h1 > < h1 />ػ ا <img src="image1.jpg" width="100" height="140" /> س ف رظ ش ا ظ سح خ ف زا ا ض أل ل ١ خ ا < p > z-index ا خبص ث ب أل ا م ١ خ ا خبطخ ثب ض ا ز رسب طفش ثشى افزشاػ </p>

120 </body> </html> و الذي يبدو في مستعرض الويب كمايمي: الشكل : 41 مثال عمى استخدام الخاصية z-index يمكف أيضا عرض أشرطة تمرير في الحالة التي يكوف فييا محتوى العنصر أكبر بكثير مف حجمو, و ذلؾ عف طريؽ إسناد القيمة scroll إلى الخاصية,overflow لنشاىد المثاؿ التالي: <html> <head> <style type="text/css"> * {direction:rtl;} div { background-color:#00ffff; width:250px;

121 height:100px; overflow:scroll; } </style> </head> <body> <div> أل أثؼبد ا ؼ ظش ا حب سزى أل أثؼبد ا ض <p> ا ز رمشأ ا ٢ س ١ ز ػشع أششؿخ ا ز ش ٠ ش زا سأحب ي إؿب خ < p />ا ض أوثش ثئػبفخ ثؼغ ا ى بد اإلػبف ١ خ إ ١. </body> </html> </div> يبدو المثاؿ السابؽ كمايمي في مستعرض الويب: الشكل : 42 مثال عمى عرض أشرطة التمرير لمعناصر ذات المحتوى الكبير

122 واحدات القياس في CSS height width يت تحديد أبعاد العناصر عمى سبيؿ المثاؿ مف خالؿ خاصيتي العرض ا لرتفاع و وذلؾ بإسناد قي الواحدة px % em in cm mm pt pc رقمية بالبكسؿ أو بإحدى واحدات القياس التالية: مثال الشرح 150px بكسؿ 50% بالنسبة المئوية 1.5em كؿ em يساوي بكسؿ 1in إنش 1cm سنتي ميتر 100mm ميمي ميتر 30pt إنش( نقطة )النقطة = 15pc إنش( بيكا )البيكا = نقطة = الجدول : 11 واحدات القياس في CSS نموذج الصندوق CSS Box Model عند الحديث عف تصمي صفحات الويب يجب في الحقيقة في ما يعرؼ بػ"نموذج الصندوؽ" أو باإلنجميزي ة, حيث يت تمثيؿ كؿ عنصر مف عناصر مستند HTML عند إنشائو في box model المستعرض بأربعة مستطيالت متداخمة تشكؿ نموذج الصندوؽ و ىي مف الداخؿ إلى الخارج: - محتوى العنصر :content و يمثؿ كؿ ما ىو موجود بيف وسمي بداية و نياية العنصر. الداخمية :padding و تمثؿ المسافة الفاصمة بيف محتوى العنصر و بيف حدوده. - اإل ازحة - الحدود :border و يمثؿ اإلطار الخارجي لمعنصر. :margin و تمثؿ المسافة الفاصمة بيف حدود العنصر و العناصر - اإل ازحة الخارجية األخرى في المستند.

123 يوض ح الشكؿ التالي نموذج الصندوؽ: تتيح الشكل : 43 نموذج الصندوق box model CSS لمطو ر الويب التحك الكامؿ بكؿ منطقة مف ىذه المناطؽ األربع عبر مجموعة مف الخصائص نستعرضيا في الفق ارت التالية. خصائص الحدود border تسمح لمطور الويب أف يتحك بحدود العناصر عبر الخصائص border-width و CSS و,border-color يت إسناد قيمة رقمية بإحدى واحدات القياس إلى الخاصة border-style تعبر عف مقدار سماكة الحدود, و يت إسناد قيمة نصية تعبر عف شكؿ الحدود border-width dashed dotted لمخاصية border-style و التي يمكف أف تأخذ إحدى القي لمحدود المنقطة و لمحدود لمحدود العادية و المتقطعة و لمحدود المضاعفة و ridge و و groove double solid و لمحدود ثالثية األبعاد, و يت إسناد قيمة لونية تعبر عف لوف الحدود, لنشاىد outset inset المثاؿ التالي: <html> <head>

124 <style type="text/css"> * { direction:rtl; }.one { border-style:solid; }.two { border-style:dashed; } </style> </head> <body> p> ػبد ٠ خ<" class="one < p />حذ د p> زمؼخ<" class="two < p />حذ د </body> </html> و الذي يبدو في مستعرض الويب كمايمي:

125 ممحوظة: يمكف تحديد شكؿ border-style خاص لكؿ طرؼ مف أط ارؼ الحدود و ذلؾ عف طريؽ إسناد أربعة قي مفصولة بف ارغات لمخاصية border-style تمثؿ األولى شكؿ الحد العموي و الثانية شكؿ الحد األيمف و الثالثة شكؿ الحد السفمي و ال اربعة شكؿ الحد األيسر بالشكؿ: border-style: dotted dashed groove double; border-top-style border-right-style border-left-style عف طريؽ الخصائص أو الفردية و و و border-color و بالطبع فإف ىذه الممحوظة تنطبؽ عمى خاصيتي الموف,border-bottom-style و العرض.border-width خصائص اإل ازحة الداخمية padding يت تحديد مقدار اإل ازحة الداخمية )المسافة بيف محتوى العنصر و حدوده( عف طريؽ الخصائص padding- إل ازحة الطرؼ األيسر و padding-right إل ازحة الطرؼ األيمف و padding-left إل ازحة الطرؼ العموي و padding-bottom إل ازحة الطرؼ السفمي, أو عف طريؽ الخاصية top padding إل ازحة جميع األط ارؼ, و ي سن د إلى ىذه الخصائص قي بإحدى واحدات القياس تعبر عف مقدار اإل ازحة الداخمية, لنشاىد المثاؿ التالي: <html> <head> <style type="text/css"> p { direction:rtl; background-color:black; color:white; }.padding { padding-top:25px; padding-bottom:25px; padding-right:50px;

126 padding-left:50px; } </style> </head> <body> ز ا حب خ ا ج ١ ؼخ ؼ ظش ا فمشح د إصاحخ <p> < p />داخ ١ خ ز حب خ ػ ظش ا فمشح غ ج د اإلصاحخ class="padding"> p> < p />ا ذاخ ١ خ و الذي يبدو في مستعرض الويب كمايمي: </body> </html> الشكل : 44 مثال عمى استخدام خصائص اإل ازحة الداخمية خصائص اإل ازحة الخارجية margin يت تحديد مقدار اإل ازحة الخارجية )المسافة بيف حدود العنصر و العناصر األخرى( عف طريؽ الخصائص إل ازحة الطرؼ األيسر و margin-right إل ازحة الطرؼ األيمف و margin-left

127 إل ازحة الطرؼ العموي و margin-bottom إل ازحة الطرؼ السفمي, أو عف طريؽ margin-top الخاصية margin إل ازحة جميع األط ارؼ, و ي سن د إلى ىذه الخصائص قي بإحدى واحدات القياس auto تعبر عف مقدار اإل ازحة الداخمية أو القيمة الخاصة لترؾ ىذه الميمة لمستعرض الويب, لنشاىد المثاؿ التالي: <html> <head> <style type="text/css"> p { direction:rtl; background-color:black; color:white; }.margin { margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; } </style> </head> <body> ا فمشح د إصاحخ خبسج ١ خ< p > < p /> ز p> ز ا فمشح ف غ إصاحخ خبسج ١ خ<" class="margin < p />أ ب </body> </html> و الذي يبدو في مستعرض الويب كمايمي:

128 الشكل 45: مثال عمى استخدام خاصية اإل ازحة الخارجة margin إخفاء العناصر CSS مف الممكف إخفاء HTML عناصر باستخدا بطريقتيف:.display إسناد القيمة none إلى الخاصية.visibility إسناد القيمة hidden إلى الخاصية و ا لختالؼ بينيما أف الطريقة الثانية تخفي العنصر مع الحفاظ عمى الحيز الذي يشغمو فارغا أما الطريقة األولى تخفي العنصر مع عد الحفاظ عمى الحيز الذي يشغمو مما يؤثر عمى تموضع العناصر. أنواع عرض العناصر يت عرض العناصر في HTML بطريقتيف:

129 بشكؿ كتمة :block حيث يت النزوؿ سط ار قبؿ العنصر و النزوؿ سط ار بعد العنصر و <p> ىذه الحالة ن ارىا مع عناصر مثؿ <h1> و و < div >...إلخ. بشكؿ سطري :inline حيث يت وضع العنصر ضمف نفس السطر دوف الحاجة لمنزوؿ <span> سط ار و ىذه الحالة ن ارىا مع عناصر مثؿ <a> و...إلخ. inline block تسمح CSS بتغيير نوع العرض لمعناصر مف إلى و بالعكس عف طريؽ إسناد.display inline إحدى القيمتيف block و إلى الخاصية الشفافية opacity opacity تتيح CSS لمطور الويب التحك بدرجة شفافية العناصر عف طريؽ الخاصة عبر إسناد. 1.0 رق عشري بيف 0.0 و إلييا, حيث أف الػ. تعني حالة عد الظيور و الػ تعني حالة الظيور التا بشكؿ طبيعي. الت عويم floating CSS تعتبر خاصية التعوي float مف أى الخصائص التي تقدميا لمحفاظ عمى تموضع متناسؽ لمعناصر حيث يت تعوي جميع العناصر إلى جية واحدة بالنسبة لعنصر محدد, و التعوي في.left تعوي أفقي إما إلى اليميف right أو إلى اليسار CSS عند تعوي عنصر ما فإف العناصر التي تميو سوؼ تمتؼ حولو )تعو( بما يتالء و تعويمو, أما العناصر التي قبمو فمف تتأثر بالتعوي, لنشاىد المثاؿ التالي: <html> <head> <style type="text/css"> p { direction:rtl; text-align:justify; }

130 img { float:right; } </style> </head> <body> <p> <img src="picture1.gif" /> حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب حز ظ ب. و الذي يبدو في مستعرض الويب كمايمي: </p> </body> </html>

131 الشكل : 46 مثال عمى استخدام خاصية التعويم float كما تالحظ فقد ت تعوي الصورة إلى اليميف مف النص و التؼ المحتوى الذي يمييا بما يتالء و موضع الصورة الجديد بعد التعوي, و التفاؼ النص بيذا الشكؿ المتناسؽ ل يكف ليحدث لو ت وضع الصورة في ىذا الموضع بطريقة أخرى. فائدة: جر ب تغيير حج نافذة المستعرض و لحظ احتفاظ الصفحة بتناسقيا, ث جر ب حذؼ خاصية التعوي مف الصفحة و لحظ الفرؽ في حاؿ تك ارر ذات العممية. بالطبع و كما ذكرنا سابقا أصبح واضحا اآلف أف الخاصية float تقو بتعوي العنصر إلى جية اليميف أو إلى جية اليسار, ث تقو بتدوير العناصر التالية لو لتتالء و موضع العنصر الم ع و, و بالطبع يمكف أف يتمو/يسبؽ العنصر الم ع و الحالي أي قدر مف العناصر المعو م ة األخرى و ليذا clear تتيح CSS منع وجود عناصر عائمة بجوار العنصر الحالي باستخدا الخاصية مع left العناصر التي ل نرغب بوجود عناصر عائمة بجوارىا, حيث يت إسناد إحدى القي لمنع وجود

132 both عناصر عائمة right مف اليسار أو وجود عناصر عائمة لمنع مف اليميف أو وجود لمنع عناصر عائمة مف الجيتيف. تعميقات CSS */ /* يت كتابة التعميقات البرمجية في أو ارؽ األنماط ا لنسيابي ة CSS كمايمي: و بيف /* comment */ أنواع الوسائط Media types تتيح CSS تخصيص مظير و شكؿ الصفحة بناء عمى ما يقو بعرضيا, فيمكف منح الصفحة مظي ار و شكال معينا عند استع ارضيا في مستعرض الويب و منحيا مظي ار و شكال مختمفا تماما عند عرضيا عمى الورؽ )طباعتيا(...إلخ. يت تحقيؽ ما سبؽ ذكره مف خالؿ وصؼ نوع media ما قبؿ مجموعة قواعد,CSS و نوع آخر قبؿ مجموعة قواعد CSS أخرى حيث يت تطبيؽ كؿ مجموعة عند الحالة المذكورة media في قاعد لنشاىد المثاؿ التالي: <html> <head> <style screen { p{ text-align:justfy direction:rtl;

133 color:white; } body { background-color:green; } print { p { text-align:justfy; direction:rtl; color:white;} } </style> </head> <body> <p> زا ا حز ا ظ سز ذ ا ٠ ت ا ز س ف ٠ جذ ثش ٠ مز ١ خز فز ١ ف حب ز ا ؼشع ػ ا شبشخ ا ؼشع ػ ا سق/ا جبػخ. </p> </body> </html>

134 يبدو المثاؿ السابؽ عند العرض في مستعرض الويب كمايمي: الشكل : 47 استخدام و يبدو عمى الورؽ )في نافذة المعاينة قبؿ الطباعة في الحقيقة( كمايمي: الشكل : 48 استخدام

135 يمكف أف نضع إحدى القي التالية: القيمة all aural braille embossed handheld print projection screen tty tv الشرح جميع أجيزة العرض لألجيزة الناطقة األجيزة المعتمدة عمى الممس طابعات األجيزة المعتمدة عمى الممس لألجيزة الكفي ة لكؿ الطابعات ألجيزة اإلسقاط )ال ارشؽ مثال ( لشاشات الحواسيب لكؿ األجيزة التي تستخد شاشات ذات عرض محرؼ ثابت )كالمبرقة الكاتبة(. لكؿ األجيزة الشبيية بالتمفاز الجدول : 11 قيم CSS و بانتياء حديثنا عف Media الػ قواعد نكوف قد أنيينا -بفضؿ اهلل- مناقشة بأغمب خصائصيا, و سنتابع في الصفحات التالية استع ارض CSS خصائص العصري ة و التي تعرؼ CSS باس,CSS3 أم ا اآلف فأرى أف نعرض جدو ل بم ح د دات التقميدي ة ليكوف مرجعا سريعا عند الحاجة. محددات دليل CSS المحدد مثال شرح المثال كؿ العناصر ذات الواصفة "class="mukhtar كؿ العناصر ذات الواصفة "id="name.mukhtar #name.class #id

136 كؿ العناصر كؿ عناصر الوس <p> كؿ عناصر الوس <a> و كؿ عناصر الوس <p> كؿ عناصر الوس <a> الموجودة داخؿ <div> كؿ عناصر الوس <a> الموجودة داخؿ <div> بشكؿ مباشر كؿ عناصر الوس <p> الموجودة مباشرة بعد عنصر <div> كؿ العناصر التي تحوي الواصفة src كؿ العناصر التي تحوي الواصفة src مسندا إلييا القيمة image.jpg كؿ العناصر التي تحوي الواصفة target مسندا إلييا قيمة ل تساوي _blank كؿ العناصر التي تحوي الواصفة target مسندا إلييا قيمة تبدأ بػ كؿ الروابط التي ل يت النقر عمييا كؿ الروابط التي ت النقر عمييا ال اربط الفعاؿ حاليا ال اربط الذي تمر عميو الفأرة اآلف كؿ عناصر اإلدخاؿ الفعالة حاليا أوؿ محرؼ مف كؿ عنصر <p> أوؿ سطر مف كؿ عنصر <p> * p a,p div a div>a div+p [src] [src=image.jpg] [target~=_blank] [href = a:link a:visited a:active a:hover input:focus p:first-letter p:first-line * tag tag,tag tag tag tag>tag tag+tag [attribute] [attribute=v] [attribute~=v] [attribute =v] :link :visited :active :hover :focus :first-letter :first-line

137 يكوف ا لبف األو ؿ <p> كؿ عنصر لعنصره األب إد ارج محتوى قبؿ كؿ عنصر <p> إد ارج محتوى بعد كؿ عنصر <p> تبدأ قيمة <p> تحديد كؿ عنصر واصفتو lang بالقيمة en p:first-child p:before p:after p:lang(en) الجدول : 12 محددات CSS :first-child :before :after :lang(language)

138 CSS 3 مع تطور مفيو الويب )خصوصا مع ظيور الػ )Web 2.0 ظيرت الحاجة إلى تحسيف أو ارؽ األنماط ا لنسيابية لتحقيؽ تصامي أجمؿ في مواقع الويب دوف الحاجة إلى اإلف ارط في استخدا ب ارمج التصمي و ىذا ما دفع إلى ظيور اإلصدار الجديد مف أو ارؽ األنماط ا لنسيابي ة و المعروؼ بػ.CSS3 CSS تضيؼ CSS3 مجموعة مف المحددات و الخصائص الجديدة إلى التقميدية و اصط م ح عمى تسمية كؿ مجموعة مف ىذه الخصائص أو المحددات باس الوحدة,Module و لعؿ أى الوحدات المضافة ىي: وحدة المحددات الجديدة وحدة الحدود و الخمفيات الجديدة وحدة تحسيف نموذج الصندوؽ وحدة مؤث ارت النصوص الجديدة التحويالت وحدة اليندسية ذات البعديف وحدة التحويالت اليندسية ذات الثالثة وحدة الحركات وحدة الصفحات متعددة األعمدة وحدة واجية المستخد أبعاد المستعرضات الداعمة بالنسبة لػ CSS3 فيي مدعومة مف أغمب مستعرضات الويب الحديثة و بشكؿ أوسع مف بكثير دع ذات المستعرضات لػ.HTML5

139 الحدود الجديدة CSS3 Borders تتيح CSS3 إنشاء الحدود ذات الزوايا غير القائمة Borders( )Round Corner بسيولة و يسر و دوف الحاجة لستخدا أي مف ب ارمج التصمي )مثؿ )Photoshop التي طالما استخدمت لتحقيؽ ىذه الميمة عبر خاصية جديدة ىي الخاصية border-radius و ذلؾ بإسناد قيمة إلييا بإحدى واحدات القياس, تعبر القيمة المسندة عف نصؼ قطر قوس الدائرة المقتطع ك ازوية لإلطار, لنشاىد المثاؿ التالي: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <style type="text/css"> } div { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ </style> </head> <body>

140 <div>the border-radius property allows you to add rounded corners to elements.</div> و الذي يبدو في مستعرض الويب كمايمي: </body> </html> الشكل : 49 استخدام خاصية border-radius في مستعرض كروم ممحوظة: مستعرض Firefox يعتبر أف اس الخاصية ىو -moz-border-radius كما تتيح CSS3 إنشاء حدود العناصر با لعتماد عمى صورة صغيرة تعبر عف أصغر شكؿ ممكف لإلطار يت إنشاء اإلطار و بطريقتيف: :repeated بتك ارر جزء مف الصورة. :stretch بتمديد جزء مف الصورة. و الشكؿ الجانبي يوض ح الفرؽ بيف الطريقتيف المذكورتيف. يت إنشاء الحدود الصورية مف خالؿ تمرير الشكل : 51 اإلطا ارت الصورية في CSS3

141 مسار الصورة إلى الخاصية,border-image-source ث إسناد إحدى القيمتيف repeat أو إلى الخاصية,border-image-repeat ث إسناد عرض اإلطار بالبكسؿ إلى stretch border- الخاصية,border-image-width و إسناد قي مناسبة بالبكسؿ إلى الخاصيتيف و border-image-outset لتحديد جزء الصورة الذي سيت تك ارره أو تمديده image-slice لصنع اإلطار. ممحوظة: يمكف استخدا الخاصية المختصرة border-image و التي تجمع جميع الخصائص السابقة بالصيغة border-image:source slice width outside repeat; لنشاىد المثاؿ التالي الذي يعتمد عمى الصورة التي ع ر ض ت سابقا لصنع اإلطار: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <style type="text/css"> div { } border-width:15px; width:250px; padding:10px 20px; -webkit-border-image:url(border.png) stretch; </style> </head> <body> <div> Here, the image is stretched to fill the area.</div>

142 </body> </html> و الذي يبدو في مستعرض الويب كمايمي: الشكل : 51 اإلطار الصوري في مستعرض جوجل كروم -moz- ممحوظة: مستعرض Firefox يستخد البدائة قبؿ أسماء الخصائص المذكورة أعاله, و مستعرضا -o- يستخد البادئة Opera و مستعرض -webkit- يستخدماف البادئة Chrome و Safari تتيح أيضا إنشاء ظؿ لعنصر ما عبر الخاصية box-shadow و التي يسند إلييا قيمة CSS3 لونية تعبر عف لوف الظؿ و قي بالبكسؿ تعبر عف إحداثيات الظؿ, لنشاىد المثاؿ التالي: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <style type="text/css"> div { width:300px; height:100px; background-color:yellow;

143 -webkit-box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div></div> </body> </html> و الذي يبدو في مستعرض الويب كمايمي: الشكل : 52 خاصية الظل كما تبدو في مستعرض كروم ممحوظة: يستخد مستعرضا Safari و Chrome البادئة -webkit- قبؿ اس الخاصية الخمفيات الجديدة CSS3 Backgrounds في CSS3 ت إضافة خاصيتيف جديدتيف لمساعدة مطور الويب عمى التحك بالخمفيات بشكؿ أفضؿ, األولى ىي الخاصية background-size و التي تسمح بتحديد أبعاد الصورة الخمفية بالبكسؿ مما يسمح بإعطاء الصورة كخمفية أبعادا تختمؼ عف األبعاد األصمية لمصورة و ىو ما ل يكف ممكنا قبؿ,CSS3 يت استخدا ىذه الخاصية كمايمي:

144 يعني الرق األوؿ إلى عرض الصورة في حيف أف الثاني يشير إلى ارتفاعيا. background-size: 80px 60px; أما الخاصية الثانية فيي الخاصية background-origin و التي تحدد أحد أج ازء نموذج الصندوؽ ليت تطبيؽ الخمفية عمى أساسو و يمكف أف تأخذ إحدى القي context-box لتطبيؽ الخمفية عمى المستطيؿ المحدد بالمحتوى أو padding-box لتطبيؽ الخمفية عمى المستطيؿ المحدد بالمحتوى و اإل ازحة الداخمية معا أو border-box لتطبيؽ الخمفية عمى المستطيؿ المحدد بالمحتوى و باإل ازحة الداخمية و بالحدود و الشكؿ التالي يوضح الفرؽ بيف المستطيالت الثالثة. الشكل : 53 نموذج الصندوق بالنسبة لخاصية الخمفية في CSS3 ممحوظة: في مستعرض Firefox تسبؽ الخاصية بالبادئة -moz- ممحوظة: في مستعرضي Safari و Chrome يت استخدا البادئة -webkit- مف التحسينات التي أضيفت إلى خاصية الخمفية في CSS3 السماح بإضافة أكثر مف صورة في نفس الوقت كخمفية لنفس العنصر و ذلؾ عبر الفصؿ بيف كؿ خمفية و األخرى بالفاصمة بالشكؿ: background-image:url(back1.gif),url(back2.png);

145 CSS3 خصائص تنسيق النصوص الجديدة في ت إضافة مجموعة مف الخصائص الجديدة لتنسيؽ النصوص في CSS3 في بعضيا نعرض الجدوؿ التالي: الخاصية hanging-punctuation punctuation-trim text-justify text-outline text-overflow الشرح الترقي خارج حدود عالمة تحدد وضع العنصر <p> تزيؿ عالمة الترقي ا لفتتاحية مف بداية كؿ سطر مف أسطر <p> تحدد طريقة تحقيؽ المحاذاة عندما تكوف مساوية لػ text-align قيمة الخاصية Justify تحدد عرض و لوف الحدود الخارجية لمنص تحدد ما الذي يت عممو عندما يصبح طوؿ النص أطوؿ مف العنصر الحاوي لو أو end أو start أو allow-end أو adjacent none القيم الممكنة أو first أو none allowend أو last forceend أو interword أو auto interideograph أو أو أو inter-cluster أو distribute trim أو kashida قيمة بالبكسؿ تعبر عف العرض و قيمة عف تعبر لونية الموف clip أو ellipsis أو string

146 تضيؼ ظال لمنص قيمتيف رقمتيف و قيمة لونية تحدد طريقة تحقيؽ التفاؼ النصوص none أو normal unrestricted أو أو suppress تحديد طريقة تقسي الكممات الطويمة أو normal أو break-all hyphenate أو تقو بتحقيؽ التفاؼ النصوص عبر تقسي normal الكممات الطويمة بناء عمى الطريقة المحددة word-break في الخاصة word-break الجدول : 13 خصائص تنسيق النصوص الجديدة في CSS3 text-shadow text-wrap word-break word-wrap يعرض المثاؿ التالي استخدا إحدى ىذه الخصائص: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <style type="text/css"> h1 { } text-shadow: 5px 5px 5px #FF0000; </style> </head> <body>

147 ا ظ < h1 > < h1 />ا ض </body> </html> خصائص الخطوط الجديدة في CSS3 في CSS التقميدية كاف مف واجب مطوري صفحات الويب استخدا الخطوط الشائعة و الموجودة في أغمب حواسيب زوار الصفحة و ذلؾ أف المستعرض ل يكف قاد ار عمى عرض أي خط غير موجود في خطوط حاسوب ازئر الموقع, مع CSS3 أصبح باإلمكاف استخدا أي خط ضمف صفحة الويب بعد وضع ممؼ الخط ضمف ممفات الموقع و و إسناد مساره إلى الخاصية src الجديدة كميا و التي تستخد أو ل - يت تعريؼ اس عائمة جديدة باستخدا القاعدة font-family ثانيا - يسند اس العائمة الذي أ ن ش ئ سابقا إلى الخاصية بشكؿ تقميدي..eot ممحوظة: مستعرض Internet Exploer يدع الخطوط ذات النوع فقط بينما تدع باقي المستعرضات النوعيف.ttf و.otf لنشاىد المثاؿ التالي: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <style { font-family: myfont;

148 src: url('sansation_light.ttf'),url('sansation_light.eot') format("opentype"); /* IE */ } div { font-family:myfont; } </style> </head> <body> <div> ٠ ى اسزخذا أ ع خ ؽ زا ا ض </div> </body> </html> التحويالت الهندسية ذات البعدين 2D Transformation تمكننا CSS3 مف إج ارء تحويالت ىندسية ثنائية البعد عمى عناصر الصفحة كا لنسحاب scale و التدوير rotate و تغيير الحج و غيرىا بإسناد أحد توابع التحويؿ إلى translate الخاصة.transform Firefox -ms- ممحوظة: مستعرض Internet Explorer يستخد البادئة قبؿ اس الخاصية, و مستعرض يستخد البادئة -moz- و مستعرض Opera يستخد البادئة -o- و مستعرضي Chrome و Safari يستخدماف البادئة -webkit- و الجدوؿ التالي يعرض توابع التحويؿ الجديدة:

149 α α التابع translate(x,y) translatex(n) translate(n) scale(x,y) scalex(n) scaley(n) rotate(α) skew(xα,yα) skewx(α) skewy(α) لنشاىد المثاؿ التالي: الشرح ينقؿ العنصر إلى اإلحداثيات الممرة لو ينقؿ العنصر عمى المحور X مسافة n ينقؿ العنصر عمى المحور Y مسافة n يغير بعدي العنصر إلى البعديف الممرريف لو يغير بعد العنصر X إلى القيمة n يغير بعد العنصر Y إلى القيمة n يقو بتدوير العنصر ب ازوية α يقو بإج ارء تحويؿ ا لنح ارؼ وفؽ ال ازويتيف Xα و Yα يقو بإج ارء تحويؿ ا لنح ارؼ عمى المحور X وفؽ ال ازوية يقو بإج ارء تحويؿ ا لنح ارؼ عمى المحور Y وفؽ ال ازوية الجدول : 14 توابع التحويل الهندسي ثنائي البعد في CSS3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <style type="text/css"> div { -webkit-transform:skew(30deg,20deg); width:100px; height:75px; background-color:red; border:1px solid black;

150 } </style> </head> <body> <div>it is CSS3 Magic!</div> </body> </html> و الذي يبدو في مستعرض الويب كمايمي: الشكل : 54 مثال عمى تحويل Skew في مستعرض جوجل كروم degree ممحوظة: األحرؼ deg التي ت تمريرىا بعد األرقا إلى تابع التحويؿ تعني درجة و ذلؾ تميي از عف ال اردياف و الذي ترمز لو األحرؼ rad

151 التحويالت الهندسية ثالثية األبعاد 3D transformation تتيح CSS3 القيا بتحويالت ىندسية ثالثية األبعاد عمى العناصر بنفس األسموب السابؽ و لكف باستخدا التوابع التي يعرضيا الجدوؿ التالي: التابع translate3d(x,y,z) translatex(n) translatey(n) translatez(n) scale3d(x,y,z) scalex(n) scaley(n) scalez(n) rotate3d(x,y,z,α) rotatex(α) rotatey(α) rotatez(α) perspective(n) الشرح ينقؿ العنصر إلى اإلحداثيات الممرة لو ينقؿ العنصر مسافة n عمى المحور X ينقؿ العنصر مسافة n عمى المحور Y ينقؿ العنصر مسافة n عمى المحور Z يغير أبعاد العنصر إلى األبعاد الممرة لو يغير بعد العنصر X إلى المقدار n يغير بعد العنصر Y إلى المقدار n يغير بعد العنصر Z إلى المقدار n يقو بتدوير العنصر عمى المحاور الثالثة ب ازوية مقدارىا α يقو بتدوير العنصر عمى المحور X ب ازوية α يقو بتدوير العنصر عمى المحور Y ب ازوية α يقو بتدوير العنصر عمى المحور Z ب ازوية α يحدد منظور الرؤية الجدول : 15 التحويالت الهندسية ثالثية األبعاد في CSS3 االنتقال المتحرك Transition توفر CSS3 طريقة جميمة و مميزة إلنشاء تأثير عمى عناصر المستند يعرؼ ىذا التأثير الخاص CSS transition باس ا لنتقاؿ المتحرؾ و الذي يت تحقيقو عبر الخاصية حيث يت تطبيؽ قاعدة مختمفة عف القاعدة األصمية لمعنصر خالؿ زمف محدد مما يظير العنصر بشكؿ متحرؾ.

152 عف طريؽ الصيغة: transition: property duration; حيث تعبر عف اس الخاصية التي ستتغير و duration تعبر عف الزمف و يمكف تغيير property أكثر مف خاصية بالصيغة: transition: property1 duration1, property2 duration2, etc; لنشاىد المثاؿ التالي: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <style type="text/css"> div { } width:100px; height:100px; background:red; -webkit-transition:width 2s, height 2s; div:hover { } width:200px; height:200px; webkit-transform:rotate(180deg);

153 </style> </head> <body> <div>hover over me to see the transition effect!</div> </body> </html> ممحوظة: لف أذكر البادئات التي تستخدميا المستعرضات الشييرة ىنا فمف المفترض أنؾ اعتدت عمييا اآلف و سأنوه إلى أف الحرؼ s بعد القيمة الرقمية يعني أف الزمف بالثانية second حركات CSS3 تتيح CSS3 إنشاء حركات مخصصة في صفحة الويب مما يغني مطور الويب عف استخدا صور الػ المتحركة أو تأثي ارت flash و غيرىا ضمف الصفحة, و يت إنشاء الحركات.gif بخطوتيف: أو ل - يت تعريؼ اس خاص لمحركة في و تحديد ماىيتيا عبر تحديد الوضع ا لبتدائي from و الوضع النيائي,to و بالطبع عند تطبيؽ الحركة يت ا لنتقاؿ مف الوضع ا لبتدائي لمعنصر إلى الوضع النيائي خالؿ فترة زمنية مما يجعمنا نشعر بالحركة. يت إسناد اس ثانيا - الحركة و زمف تنفيذىا إلى الخاصية animation الخاصة بالعنصر. لنشاىد المثاؿ التالي: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html>

154 <head> <style type="text/css"> div { width:100px; height:100px; background:red; -webkit-animation:myanimation 5s; myanimation { from {background:red;} to {background:yellow;} } </style> </head> <body> <div></div> </body> </html> المثاؿ السابؽ يعرض إنشاء حركة با لعتماد عمى الحالة البدائية و الحالة النيائية لمعنصر أثناء الحركة حيث أف الحالة البدائية تعبر عف شكؿ العنصر لحظة بدء الحركة و الحالة النيائية تعبر عف شكؿ العنصر لحظة نياية الحركة.

155 يمكف تخصيص شكؿ العنصر في كؿ لحظة مف لحظات الحركة عبر إنشاء قاعدة CSS خاصة بيذه المحظة ضمف myanimation { 0% {background:red;} 15% {backgroung:green;width:150px;color:white;} 50% {height:350px;} 100% {background:yellow;} } حيث أف 0% تعني لحظة بداية الحركة و 100% تعني لحظة نيايتيا و القي األخرى تعبر عف فت ارت أثناء حدوث الحركة. ممحوظة: تحدث ىذه التغي ارت أثناء الحركة و يعود العنصر إلى شكمو الطبيعي عند انتياء الحركة األعمدة المتعددة في CSS3 Multi-Columns تسمح CSS3 بعرض محتوى العناصر عمى شكؿ أعمدة متعددة )عمى مبدأ الج ارئد( بطريقتيف: األولى- عدد أعمدة ثابت و عرض عمود متغير: و يت ذلؾ مف خالؿ إسناد عدد األعمدة إلى الخاصية column-count التي تقس المحتوى إلى العدد المذكور مف األعمدة, و يتغير عرض األعمدة مع تغير حج نافذة المستعرض. الثانية- عرض عمود ثابت و عدد أعمدة متغير: و يت ذلؾ مف خالؿ عرض العمود الواحد إلى,column-gap و في ىذه الخاصية column-width و المسافة بيف كؿ عموديف إلى الخاصية

156 الطريقة تحافظ األعمدة عمى عرض ثابت لكؿ منيا و يتغير عددىا مع تغير حج نافذة المستعرض. ممحوظة: تستخد نفس البادئات المذكورة سابقا مع خصائص األعمدة المتعددة. المثاؿ التالي يعرض إنشاء األعمدة المتعددة بالطريقة األولى: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <style type="text/css">.newspaper { } -webkit-column-count:3; </style> </head> <body> <div class="newspaper"> this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content this is a sample content.

157 </div> </body> </html> المثاؿ السابؽ يبدو في مستعرض الويب كمايمي: الشكل : 55 إنشاء محتوى بأعمدة متعددة محددة العدد. يمكف وضع فواصؿ ذات مظير و لوف محدديف بيف األعمدة عف طريؽ الخاصية column-rule بشكؿ مشابو لممثاؿ التالي: column-rule: 4px dotted black; واجهة المستخدم CSS3 User Interface باإلضافة لما قدمتو CSS3 مف مي ازت لمف ينشئ صفحات الويب فقد قدمت مجموعة مف التحسينات لممستخد النيائي لمصفحة عبر الخصائص التي يعرضيا الجدوؿ التالي:

Δείτε περισσότερα